Question

可能重复：
Closures in a for loop and lexical environment

我正在学习JavaScript中的闭包......我看到了简单代码的例子：

for (var i = 0; i < 10; i++) {
  document.getElementById('box' + i).onclick = function() {
    alert('You clicked on box #' + i);
  };
}

但究竟发生的是，无论你选择了什么div，你都会得到关于最后i - 最后一次迭代的警报。

我看到了内部函数问题的解决方案，但为什么会发生这种情况？ doest它不会在每次迭代时绑定onclick事件吗？

Answer 1

每次迭代都会创建一个新函数，但每个函数都会引用相同的变量i（内存中的一个位置）。 i的值仅在执行处理程序时进行评估。 for循环结束后很长一段时间，i的值为10。

Wikipedia's article about closures值得一读，并提到闭包可以使用的两种方式：通过绑定变量的当前值或对变量本身的引用。后者是JavaScript的情况。

Answer 2

好旧的同变量问题。您可以通过将i作为参数传递给自调用函数来轻松绕过它：

for(var i = 0; i < 10; i++) {
    (function(i) {
        document.getElementById('box' + i).onclick = function() {
            alert('You clicked on box #' + i);
        };
    })(i);
}

这是必要和有效的原因是i通常总是相同的 - JavaScript只有一个函数范围。通过使用以i作为参数的自调用函数，您每次都会创建一个新的i，然后将其保存在回调函数的闭包中。

在loop-scope变量中使用闭包

2 个答案: