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 }