JavaScript闭包示例

在下面的例子中,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4。

 1 <html>

 2 <head>

 3 <meta charset="utf-8" />

 4 <title>闭包演示</title>

 5 <style type="text/css">

 6     p {background:#ccc;}

 7 </style>

 8 <script type="text/javascript">

 9 window.onload = function() {   

10     var arr= document.getElementsByTagName("p");   

11     for( var i=0; i<arr.length; i++ ) {   

12          arr[i].onclick = function() {   

13          alert(i);   

14     }

15   }

16 }

17 </script>

18 </head>

19 <body>

20 <p>000</p>

21 <p>111</p>

22 <p>222</p>

23 <p>333</p>

24 <p>444</p>

25 </body>

26 </html> 

原因是初学者并未理解JavaScript的闭包特性。通过element.onclick=function(){alert(i);}方式给元素添加 点击事件。响应函数function(){alert(i);}中的 i 并非每次循环时对应的 i(如0,1,2,3,4)而是循环后最后 i 的值5。 或者说循环时响应函数内并未能保存对应的值 i,而是最后一次i++的值5。

 

方法1:将变量 i 保存给在每个段落对象(p)上

1  window.onload = function(){

2     var arr = document.getElementsByTagName('p');

3      for(var i=0; i<arr.length; i++){

4          arr[i].i= i;  //或 arr[i].index = i;

5              arr[i].onclick = function(){

6              alert(this.i);  //或alert(this.index);

7         }

8      }

9 }                

方法2:加一层闭包,i 以函数参数形式传递给内层函数

window.onload = function () {

  var arr= document.getElementsByTagName("p");

  for( var i=0; i<pAry.length; i++ ) {

   (function(arg){

       arr[i].onclick = function() {

          alert(arg);

       };

   })(i);//调用时参数

  }

}

方法3:将变量 i 保存在匿名函数自身

1 window.onload = function () {

2   var arr= document.getElementsByTagName("p");

3   for( var i=0; i<arr.length; i++ ) {

4    (arr[i].onclick = function() {

5         alert(arguments.callee.i);

6     }).i = i;

7   }

8 }

4、加一层闭包,i 以局部变量形式传递给内层函数

 1 window.onload = function () {

 2   var arr= document.getElementsByTagName("p");

 3   for( var i=0; i<arr.length; i++ ) {

 4     (function () {

 5       var temp = i;//调用时局部变量

 6       arr[i].onclick = function() {

 7         alert(temp);

 8       }

 9     })();

10   }

11 }

5、加一层闭包,返回一个函数作为响应事件(注意与2的细微区别)

 1 window.onload = function () {

 2   var arr= document.getElementsByTagName("p");

 3   for( var i=0; i<arr.length; i++ ) {

 4    arr[i].onclick = function(arg) {

 5        return function() {//返回一个函数

 6        alert(arg);

 7      }

 8    }(i);

 9   }

10 }

6、用Function实现,实际上每产生一个函数实例就会产生一个闭包

1  window.onload = function() {

2      var arr= document.getElementsByTagName("p");

3      for( var i=0; i<arr.length; i++ ) {

4        arr[i].onclick = new Function("alert(" + i + ");"); //new一次就产生一个函数实例

5      }

6  }

 

7、用Function实现,注意与6的区别

1 window.onload = function() {

2     var arr= document.getElementsByTagName("p");

3     for( var i=0; i<arr.length; i++ ) {

4          arr[i].onclick = Function('alert('+i+')');

5     }

6 }

 

你可能感兴趣的:(JavaScript)