Javascript closure demonstration

A netizen asked a question, as shown in the following HTML, why is the output of all P paragraphs 5 rather than alert corresponding to 0, 1, 2, 3, and 4.

 
<! Doctype HTML>  
 

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 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)
 

 
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
 

 
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.
 

Function init3 () {var pary = document. getelementsbytagname ("p"); For (VAR I = 0; I <Pary. length; I ++) {(function (ARG) {pary [I]. onclick = function () {alert (ARG) ;}}) (I); // parameters for calling }}
 
 
4. Add a closure, and I will pass it to the inner function as a local variable.
 

 
Function init4 () {var pary = document. getelementsbytagname ("p"); For (VAR I = 0; I <Pary. length; I ++) {(function () {var temp = I; // The local variable pary [I] During the call. onclick = function () {alert (temp );}})();}}
 
 
5. Add a closure to return a function as a response event (note the minor differences with 3)
 

 
Function init5 () {var pary = document. getelementsbytagname ("p"); For (VAR I = 0; I <Pary. length; I ++) {pary [I]. onclick = function (ARG) {return function () {// returns a function alert (ARG) ;}} (I );}}
 
 
 

And then found two
 

 
6. Implement the function. In fact, every function instance is generated will generate a closure.
 

 
Function init6 () {var pary = document. getelementsbytagname ("p"); For (VAR I = 0; I <Pary. length; I ++) {pary [I]. onclick = new function ("alert (" + I + ");"); // a function instance is generated once new }}
 
 
7. Use function implementation. Note the differences with function 6.
 

 
Function init7 () {var pary = document. getelementsbytagname ("p"); For (VAR I = 0; I <Pary. length; I ++) {pary [I]. onclick = function ('alert ('+ I + ')');}}