Javascript：循环闭合？

Question

我想做以下事情：

for (var i = 0; i < 10; ++i) {
    createButton(x, y, function() { alert("button " + i + " pressed"); }
}

问题是我总是得到 i 的最终值，因为 Javascript 的闭包不是按值计算的。
那么我怎样才能用javascript做到这一点呢？

Answer 1

如果您正在为使用 JavaScript 1.7 或更高版本的浏览器进行编码，一种解决方案是使用 let 关键字：

for(var i = 0; i < 10; ++i) {
    let index = i;
    createButton(x, y, function() { alert("button " + index + " pressed"); }
}

来自 MDC 文档中心：

let 关键字导致该项目
要使用块创建的变量
级别范围，产生新的参考
为每次迭代创建
for 循环。这意味着一个
为每个捕获单独的变量
关闭，解决由
共享环境。

查看MDC 文档中心了解传统方法（创建另一个闭包）。

Answer 2

for(var i = 0; i < 10; i++) {
    (function(i) {
        createButton(function() { alert("button " + i + " pressed"); });
    })(i);
}

请注意，JSLint 不喜欢这种模式。它抛出“不要在循环内创建函数”。

现场演示： http://jsfiddle.net/simevidas/ZKeXX/

Answer 3

通过执行另一个函数为闭包创建一个新范围：

for(var i = 0; i < 10; ++i) {
    createButton(x,y, function(value) { return function() { alert(...); }; }(i));
}

http://www.mennovanslooten.nl/blog /post/62

Answer 4

您需要将闭包放入单独的函数中。

for(var dontUse = 0; dontUse < 10; ++dontUse) {
    (function(i) {
        createButton(x, y, function() { alert("button " + i + " pressed"); }
    })(dontUse);
}

此代码创建一个匿名函数，该函数将 i 作为循环每次迭代的参数。
由于这个匿名函数每次迭代都有一个单独的 i 参数，因此它解决了这个问题。

这相当于

function createIndexedButton(i) {
    createButton(x, y, function() { alert("button " + i + " pressed"); }
}

for(var i = 0; i < 10; ++i) {
    createIndexedButton(i);
}

Answer 5

for(var i = 0; i < 10; ++i) {
    createButton(x, y, (function(n) {
        return function() {
            alert("button " + n + " pressed");
        }
    }(i));
}

外部的匿名函数会自动调用，并在其作用域内创建一个带有 n 的新闭包，其中采用 i 的当前值每次调用它时。