Common traps in JavaScript _ javascript skills

Source: Internet
Author: User
Tags hasownproperty
Common traps in JavaScript are some important points in practical application. For more information, see. All the functions you create are case sensitive.
Single quotation marks ('string') and double quotation marks ("string") are no special differences in JavaScript and can be used to create strings. however, 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 be enclosed in double quotes.

JavaScript does not support overloading. In JavaScript, the script does not take into account the parameters in function definition during execution. Instead, it directly uses the last defined function in the scope chain. This means that a function with the same name will always have only one instance


Closure is a concept related to the scope. It refers to the internal function that can still access the attributes of its external function even after the external function is executed and terminated. When a variable or method is referenced, JavaScript parses the domain using the domain chain along the execution path of the object to find the value recently defined by the variable. This value is used once it is found. Function initAnchors (event ){

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 that the page contains three A elements with IDs ranging from anchor1 to anchor3. The program registers an onclick event for the three A elements, and click "my ID is anchorX ", however, this is not the case. Click "my id is anchor4" on each A element ". Why? Because the I value is actually obtained from the domain chain when the click event occurs, when the click event occurs, initAnchors () has been executed, at this time, the I value is equal to 4. The solution can be as follows:

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 objects are often used when writing scripts, as follows:

The Code is as follows:


Var list = [1, 2, 4];
For (var I = 0; I <list. length; I ++ ){
Alert (list );
}


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

The Code is as follows:


For (var I in list ){
Alert (list );
}


In this case, the result is the same as that of the previous iteration method, because list is an Array object.

However, when using the for (var I in item) method to manipulate an object similar to an array but not an array, be careful as follows:

The Code is as follows:


Var all = document. getElementsByTagName ('*');
For (var I in all ){
// Perform some operations against the all element
}


In this iteration, the I value is equal to length, item, and namedItem, which may cause unexpected errors in the code. In some cases, you can use the hasOwnProperty () method of the object to avoid this problem. If the attributes or methods of an object are not inherited, The hasOwnProperty () method returns true. That is, the check here does not involve attributes and methods inherited from other objects. It only checks attributes directly created in the specific object itself, such as the elements allocated to the array. Therefore, if this check is used in the for loop, the loop will skip the attribute such as length because length is not the true attribute of the array all, instead, it inherits attributes from the NameNodeMap object of the derived array all.

The Code is as follows:


Var all = document. getElementsByTagName ('*');
For (var I in all ){
If (! All. hasOwnProperty (I) continue;
// Perform some operations against the all element
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.