[关闭]
@GivenCui 2016-06-01T09:44:48.000000Z 字数 1957 阅读 997

JS闭包解决for循环中取i问题

js高级

目录

JS课程合集跳转链接

问题阐述

如果for循环中有函数,函数内部i的值是跳出循环后的值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>问题点举例</title>
  6.     <script type = "text/javascript">
  7.         function init() {     
  8.             var pAry = document.getElementsByTagName("p");     
  9.             for( var i=0; i<pAry.length; i++ ) {     
  10.                  pAry[i].onclick = function() {     
  11.                  alert(i);     
  12.             }     
  13.           }     
  14.         }     
  15.     </script>
  16. </head>
  17. <body onload="init();">     
  18.     <p>产品一</p>     
  19.     <p>产品二</p>     
  20.     <p>产品三</p>     
  21.     <p>产品四</p>     
  22.     <p>产品五</p>     
  23. </body>     
  24. </html>

解决思路

三种思路 :
一. 把i保存到自定义的属性中,和每个p绑定
二. 闭包解决
三. Function解决,每产生一个实例就产生一个闭包

思路一demo举例

1.将变量 i 保存给在每个段落对象（p）上

  1.     function init() {     
  2.       var pAry = document.getElementsByTagName("p");     
  3.       for( var i=0; i<pAry.length; i++ ) {     
  4.          pAry[i].i = i;     
  5.          pAry[i].onclick = function() {     
  6.             alert(this.i);     
  7.          }     
  8.       }     
  9.     }

2.将变量 i 保存在匿名函数自身

  1.     function init2() {     
  2.       var pAry = document.getElementsByTagName("p");     
  3.       for( var i=0; i<pAry.length; i++ ) {       
  4.        (pAry[i].onclick = function() {     
  5.             alert(arguments.callee.i);     
  6.         }).i = i;     
  7.       }     
  8.     }

思路二demo举例

1.加一层闭包，i以函数参数形式传递给内层函数

  1.     function init3() {     
  2.       var pAry = document.getElementsByTagName("p");     
  3.       for( var i=0; i<pAry.length; i++ ) {     
  4.        (function(arg){         
  5.            pAry[i].onclick = function() {         
  6.               alert(arg);     
  7.            };     
  8.        })(i);//调用时参数     
  9.       }     
  10.     }

2.加一层闭包，i以局部变量形式传递给内存函数

  1.     function init4() {     
  2.       var pAry = document.getElementsByTagName("p");     
  3.       for( var i=0; i<pAry.length; i++ ) {       
  4.         (function () {     
  5.           var temp = i;//调用时局部变量     
  6.           pAry[i].onclick = function() {       
  7.             alert(temp);       
  8.           }     
  9.         })();     
  10.       }     
  11.     }

3.加一层闭包，返回一个函数作为响应事件（注意与3的细微区别）

  1.     function init5() {     
  2.       var pAry = document.getElementsByTagName("p");     
  3.       for( var i=0; i<pAry.length; i++ ) {       
  4.        pAry[i].onclick = function(arg) {     
  5.            return function() {//返回一个函数     
  6.            alert(arg);     
  7.          }     
  8.        }(i);     
  9.       }     
  10.     }

思路三demo举例

1.用Function实现，实际上每产生一个函数实例就会产生一个闭包

  1.     function init6() {     
  2.         var pAry = document.getElementsByTagName("p");     
  3.         for( var i=0; i<pAry.length; i++ ) {       
  4.           pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例    
  5.         }     
  6.     }

2.用Function实现，注意与上一个的区别

  1. function init7() {     
  2.     var pAry = document.getElementsByTagName("p");     
  3.     for( var i=0; i<pAry.length; i++ ) {     
  4.          pAry[i].onclick = Function('alert('+i+')')    
  5.     }     
  6. }
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注