Home > Developer > JavaScript
<! Doctype html> <ptml> <pead> <meta charset = "UTF-8"/> <title> closure demonstration </title> <style type = "text/css"> p {background: gold ;}</style> </pead> <body onload = "init (); "> <p> product 0 </p> <p> product 1 </p> <p> product 2 </p> <p> product 3 </p> <p> product 4 </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The above scenarios are common for beginners. That is, you can obtain the HTML Element Set and add events to the element cyclically. Obtain the corresponding index in the event Response Function (event handler. However, each query is the index of the last loop.
The reason is that beginners do not understand the closure feature of JavaScript. Add a click event to the element by using element. onclick = function () {alert (I. The I in the Response function () {alert (I);} is not the I (such as, 4) corresponding to each loop, but the value of the last I after the loop is 5. In other words, the corresponding I value is not saved in the response function during the loop, but 5 of the last I ++ value.
I understood the cause and found many solutions (purely interested ). First two
1. Save variable I to each paragraph object (p)
Copy codeThe Code is as follows:
Function init1 (){
Var pAry = document. getElementsByTagName ("p ");
For (var I = 0; I <pAry. length; I ++ ){
PAry [I]. I = I;
PAry [I]. onclick = function (){
Alert (this. I );
}
}
}
2. Save variable I in the anonymous function itself
Copy codeThe Code is as follows:
Function init2 (){
Var pAry = document. getElementsByTagName ("p ");
For (var I = 0; I <pAry. length; I ++ ){
(PAry [I]. onclick = function (){
Alert (arguments. callee. I );
}). I = I;
}
}
Then I thought of three
3. Add a closure, and I will pass it to the inner function as a function parameter.
Copy codeThe Code is as follows:
Function init3 (){
Var pAry = document. getElementsByTagName ("p ");
For (var I = 0; I <pAry. length; I ++ ){
(Function (arg ){
PAry [I]. onclick = function (){
Alert (arg );
};
}) (I); // call time Parameter
}
}
4. Add a closure, and I will pass it to the inner function as a local variable.
Copy codeThe Code is as follows:
Function init4 (){
Var pAry = document. getElementsByTagName ("p ");
For (var I = 0; I <pAry. length; I ++ ){
(Function (){
Var temp = I; // local variable during call
PAry [I]. onclick = function (){
Alert (temp );
}
})();
}
}
5. Add a closure to return a function as a response event (note the minor differences with 3)
Copy codeThe Code is as follows:
Function init5 (){
Var pAry = document. getElementsByTagName ("p ");
For (var I = 0; I <pAry. length; I ++ ){
PAry [I]. onclick = function (arg ){
Return function () {// return a function
Alert (arg );
}
} (I );
}
}
And then found two
6. Implement the Function. In fact, every Function instance is generated will generate a closure.
Copy codeThe Code is as follows:
Function init6 (){
Var pAry = document. getElementsByTagName ("p ");
For (var I = 0; I <pAry. length; I ++ ){
PAry [I]. onclick = new Function ("alert (" + I + ");"); // new generates a Function instance at a time.
}
}
7. Use Function implementation. Note the differences with Function 6.
Copy codeThe Code is as follows:
Function init7 (){
Var pAry = document. getElementsByTagName ("p ");
For (var I = 0; I <pAry. length; I ++ ){
PAry [I]. onclick = Function ('alert ('+ I + ')');
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
