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>
- <Html>
- <Head>
- <Meta charset = "UTF-8"/>
- <Title> closure demonstration </title>
- <Style type = "text/css">
- P {background: gold ;}
- </Style>
- <Script type = "text/javascript">
- Function init (){
- Var pAry = document. getElementsByTagName ("p ");
- For (var I = 0; I <pAry. length; I ++ ){
- PAry [I]. onclick = function (){
- Alert (I );
- }
- }
- }
- </Script>
- </Head>
- <Body onload = "init ();">
- <P> product 0 </p>
- <P> product 1 </p>
- <P> product 2 </p>
- <P> product 3 </p>
- <P> product 4 </p>
- </Body>
- </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 () {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); // call time Parameter
- }
- }
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; // 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)
- 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.
- 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.
- function init7() {
- var pAry = document.getElementsByTagName("p");
- for( var i=0; i<pAry.length; i++ ) {
- pAry[i].onclick = Function('alert('+i+')');
- }
- }