Summary of key points that need to be paid attention to in practical applications of JavaScript

All functions you create are case-sensitive

Single quotes ('string') and double quotes ("string") have no special meaning in JavaScript Both differences can be used to create strings. But 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, the script does not take into account the parameters when the function is defined when executing, 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 inner function even after the outer function completes execution and terminates. After that, you can still access the properties of its external function. 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){ 
　　for (var i=1; i <=3; i++){ 
　　　　var anchor = document.GetElementById(&#39;anchor&#39; + i); 
　　　　anchor.attachEvent(&#39;onclick&#39;, function() {　 
　　　　alert(&#39;my id is anchor&#39; + i); 
　　　　}); 
　　} 
}

Assume that there are three A elements in the page, with IDs ranging from anchor1 to anchor3. The program registers onclick events for the three A elements. Clicking on the A element displays "my id is anchorX", but the actual operation situation But this is not the case. Clicking 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

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(&#39;anchor&#39; + i); 
　　　　registerAnchorListner(anchor,i); 
　　} 
} 
var anchor = document.GetElementById(&#39;anchor&#39; + i); 
anchor.attachEvent(&#39;onclick&#39;, function() { 
alert(&#39;my id is anchor&#39; + i); 

});

Iterate objects, iteration is often used when writing scripts, as follows:

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

Another alternative iteration method is to use a for loop to traverse the (in )Each attribute in the list:

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 extra careful when using the for(var i in item) method to manipulate objects that are similar to arrays but not arrays, as follows

var all=document.getElementsByTagName('*'); 
for(var i in all){ 
　　//对照all元素进行某些操作 
}

During this iteration process, the value of i will are equal to length, item, and namedItem respectively, and this is likely to cause unexpected errors in the 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 true attribute of the array all, but an attribute inherited from the NameNodeMap object that derives the array all

var all=document.getElementsByTagName('*'); 
for(var i in all){ 
　　if(!all.hasOwnProperty(i)) continue; 
　　//对照all元素进行某些操作 
}

The above is the detailed content of Summary of key points that need to be paid attention to in practical applications of JavaScript. For more information, please follow other related articles on the PHP Chinese website!