用作函数参数后的变量更改

Question

我循环遍历一些元素,然后添加新元素,这些元素在单击时应该操纵这些元素.这很难解释,所以请看看这个小提琴,让它更清晰:

http://jsfiddle.net/pgFcn/3/

有趣的部分是这段代码(为了简洁起见,伪代码):

for (var i = 0; i < divs.length; i++) {
    var div = divs[i];

    someOtherElement.addEventListener("click", function () {
        testDiv(div); // always refers to the last div because variable is overwritten next loop
    });
}

我希望testDiv调用分别引用div 1,div 2,div 3,但相反,它们都引用div 3,因为变量在下一个循环迭代中被覆盖.我怎么解决这个问题？

Answer 1

这是一个经典问题.以下是它通常如何解决的方法:

for (var i = 0; i < divs.length; i++) {
    (function(div){
      someOtherElement.addEventListener("click", function () {
        testDiv(div);
      });
    })(divs[i]);
}

要理解问题和解决方案,您必须知道JavaScript中非全局变量的范围是声明它的函数的调用.这意味着

• 在您的代码中,只有一个div变量
• 在解决方案中,调用中间函数会产生不同的div变量