JavaScript循环绑定事件时索引错误的闭包解决方案

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>闭包演示</title> <style type="text/css"> p {background:gold;} </style>  </head> <body onload="init();"> <p>产品 0</p> <p>产品 1</p> <p>产品 2</p> <p>产品 3</p> <p>产品 4</p> </body> </html> 

问题现象与闭包原理分析

这是初学者在开发中极易遇到的典型场景：获取HTML元素集合后，通过循环为每个元素绑定事件。在事件处理函数内部试图获取对应的索引值，但实际运行结果却是每次获取的都是循环结束后的最后一个索引值。

初学者未掌握JavaScript闭包机制。采用element.onclick=function(){alert(i);}绑定点击事件。响应函数内的i未保存循环时的对应值（如0，1，2，3，4），而是循环结束后i的最终值5。即响应函数未保存每次循环对应的i，而是最后一次i++的结果5。

明确原因后，出于技术探索的兴趣，总结出了多种解决思路。以下是最先想到的前两种方法。

基础解决方案：直接绑定与arguments.callee

方法一：将变量i直接存储在每个段落对象（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);
} 
} 
} 

方法二：将变量i保存在匿名函数自身的属性上。

 
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;
} 
} 

随后又探索出另外三种解决方案。

进阶方案：利用立即执行函数捕获变量

方法三：增加一层闭包，将变量i作为函数参数传递给内层函数。

 
function init3() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function(arg){
pAry[i].onclick = function() {
alert(arg);
}; 
})(i);//调用时传入参数
} 
} 

方法四：增加一层闭包，将变量i以局部变量的形式传递给内层函数。

 
function init4() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function () {
var temp = i;//调用时局部变量
pAry[i].onclick = function() {
alert(temp);
} 
})(); 
} 
} 

方法五：增加一层闭包，返回一个函数作为响应事件（需注意与方案三的细微区别）。

 
function init5() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function(arg) {
return function() {//返回一个函数
alert(arg);
} 
}(i);
} 
} 

后来又发现了两种替代方案。

特殊方案：Function构造函数实现

方法六：使用Function构造函数实现，实际上每次实例化函数都会产生一个独立的闭包。

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

方法七：同样使用Function构造函数实现，但需注意与方案六的区别。

 
function init7() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = Function('alert('+i+')');
} 
}