Summary of common pitfalls in JavaScript_javascript skills

All functions you create are case-sensitive
There is no special difference between single quotes ('string') and double quotes ("string") in JavaScript, and both can be used to create strings. But as As a general principle, most WEB developers choose to use single quotes instead of double quotes because the XHTML specification requires that all XHTML attribute values ​​must be enclosed in double quotes.

JavaScript does not support overloading. In JavaScript, When the script is executed, it does not take into account the parameters when the function is defined, but directly uses the last function defined in the scope chain. This means that there will always be only one instance of a function with the same name.


Closure is a concept related to scope. It refers to the fact that the internal function is still available even after the external function is executed and terminated. Its properties can be accessed by external functions. When a variable or method is referenced, JavaScript will parse the usage domain along the usage domain chain formed by the object's execution path, look for the most recently defined value of the variable, and use that value once found. function initAnchors(event){

Copy code The code is as follows:

　for (var i=1 ; i <=3; i ){
var anchor = document.GetElementById('anchor' i);
anchor.attachEvent('onclick', function() {
alert('my id is anchor' i);
　});
　}
}

Assume there are three A elements in the page, with IDs anchor1 to anchor3, and the program registers the three A elements. Onclick event, clicking on the A-th element displays "my id is anchorX", but the actual operation is not like this. Clicking on each A element displays "my id is anchor4". Why is this? Because the value of i is actually obtained from the domain chain when the click event occurs. When the click event occurs, initAnchors() has been executed, and the value of i is equal to 4. The solution can be as follows:

Copy the code The code is as follows:

function registerAnchorListner(anchor,i) {
anchor.attachEvent('onclick', function() {
alert('my id is anchor' i);
} }
function initAnchors(event){
for (var i=1; i <=3; i ){
　var anchor = document.GetElementById('anchor' i);
registerAnchorListner(anchor,i);

　}

}

var anchor = document.GetElementById('anchor' i);
anchor.attachEvent('onclick', function() {
alert('my id is anchor ' i);



});

Iteration object, iteration is often used when writing scripts, as follows:

Copy code The code is as follows:

var list = [1,2,3,4];
for(var i = 0;i < list.length; i ){
　alert(list);
}

Another alternative iteration method is Use a for loop to iterate through each attribute located in (in)list:

Copy code The code is as follows:

for(var i in list){
　alert(list);
}

At this time, you get the same result as using the previous iteration method, because list is an Array object.

However, you must be careful when using the for(var i in item) method to manipulate objects that are similar to arrays but not arrays, as follows

Copy code The code is as follows:

var all=document.getElementsByTagName('*');
for(var i in all){
　//Perform certain operations against all elements
}

During this iteration, the values ​​of i will be equal to length, item and namedItem respectively, and this is likely to Causing unexpected errors in your code. In some cases, you can use the object's hasOwnProperty() method to avoid this problem. If the object's properties or methods are non-inherited, the hasOwnProperty() method returns true. That is, the check here does not involve properties and methods inherited from other objects, but only properties created directly in the specific object itself, such as elements assigned to an array. Therefore, if you use this check in a for loop, the loop will skip the length attribute, because length is not a real attribute of the array all, but an attribute inherited from the NameNodeMap object that derives the array all

Copy code The code is as follows:

var all=document.getElementsByTagName('*');
for(var i in all){
　if(!all.hasOwnProperty(i)) continue;
　//Contrast all elements perform certain operations
}