JavaScript tips do not traverse the array with the for in statement _jquery

Source: Internet
Author: User
Tags tojson
One, why not use the for in statement

Jqmodal This jquery plugin is estimated that many people have used, within the Jqmodal source code, there is a function for HS, which has a nested loop as follows,
Copy Code code as follows:

for (Var i in {jqmshow:1,jqmhide:1})
For (Var s in This[i])
if (H[this[i][s]])
H[this[i][s]].w[i] (this);
return F;
}

The target of the first for in traversal is an anonymous object, no problem.
The second for in traversal, based on the context, confirms that this[i] is an array object (array).
A lot of JS pioneers have warned us not to use the for in statement to traverse the array objects, in addition to performance, there may be unexpected bugs. Do not listen to the ancestors, the loss in front of hehe.
Today, I take jqmodal as an example, explain when this kind of bug will appear, when the warning.
Two, the problem reappears
Key words: Native array class, extended array class
The potential bug in the for in statement traversal of an array object is that if the native array class is expanded by other JS script libraries (for example, by adding a Tojson method i.e. array.prototype.tojson=xxxx), then use the for In traversing the extended array object's logic will differ from the logic that traverses the native array object.
To give a simple example,

Copy Code code as follows:

var x=[1];
For (var s in x) {
alert (s);
};

By common sense, if the array is a native JS class, the above statement should perform only one alert method, and S is an array of index 0. However, if the array class is extended with one more Tojson method, the above statement executes two alert, the first S is index 0, and the second S is the method name ' Tojson '.

If the logic of your code is based on the native array class, and one day your colleague references a third party JS library in the page, and the library expands the array class exactly, it is hard to imagine that the original code logic will no longer be established.

About this extension of the original JS class library, one of the most famous is prototype.js, it extends the array class A lot of methods such as Tojson,each and so on. I now understand why the founders of jquery had a prototype fire (many people use jquery at the same time in a page for special reasons and use prototype, there will be many unexpected conflict problems, only a noconflict can not be solved). In addition, if the author of the Jqmodal can read my article estimate will also complain about prototype, said: "I use for in the log group traversal is not sensible, but the more damned is prototype ... ”

As mentioned above, if you are using Jqmodal, and for other reasons in the use of prototype, congratulations on the Recruit. The conflict will cause the Jqmodal frame to be automatically closed under IE6, IE7, and the Closeclass set button. Trace Debug code you will find that the anomaly is in the for in loop of the HS method mentioned at the beginning of this article ...
third, solve the problem
Where you iterate through the array, replace the for in with the for VAR statement.
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.