如何在封闭外部作用域时取消引用JavaScript变量

好的,这是一个问题脚本.

var links = [ 'one', 'two', 'three' ];

for( var i = 0; i < links.length; i++ ) {
    var a = document.createElement( 'div' );
    a.innerHTML = links[i];
    a.onclick = function() { alert( i ) }
    document.body.appendChild( a );
}

该脚本使用数组生成三个div:一个,两个和三个.
我在每个div上设置了一个(简称为Dom0)点击处理程序,它会提醒它在数组中的位置索引. - 除了没有!它始终警告3,即阵列的最后一个索引.
这是因为'alert(i)'中的'i'是对外部作用域的实时引用(在本例中为global),并且在循环结束时它的值为3.它需要的是一种在循环中取消引用i的方法.

这是一个解决方案,我倾向于使用它.

var links = [ 'one', 'two', 'three' ];

for( var i = 0; i < links.length; i++ ) {
    var a = document.createElement( 'div' );
    a.innerHTML = links[i];
    a.i = i; //set a property of the current element with the current value of i
    a.onclick = function() { alert( this.i ) }
    document.body.appendChild( a );
}

还有其他人做不同的事吗？
有一种非常聪明的方法吗？
有谁知道图书馆是如何做到这一点的？

1> Greg..：

---

你需要使用这个小闭包技巧 - 创建并执行一个返回事件处理函数的函数.

var links = [ 'one', 'two', 'three' ];

for( var i = 0; i < links.length; i++ ) {
    var a = document.createElement( 'div' );
    a.innerHTML = links[i];
    a.onclick = (function(i) { return function() { alert( i ) } })(i);
    document.body.appendChild( a );
}

---

你可以通过创建一个本地范围的变量来传递'i'来实现同样的目的:(function(){var local = i; return function(){alert(local);}})(); 六,一切,但我更喜欢这种方法,因为否则我倾向于忘记变量作为某个参数.