在下面的例子中，為什么點擊所有的段落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 }