javascript - 当 JS 闭包使用 block 作用域变量时会发生什么？

Question

不久前，I asked a question使用此示例 JS 代码...

for (var myindex = 0; myindex < mylist.length; myindex += 1) {
    var copyindex = myindex;
    MyAsync(mylist[myindex], function () { alert(copyindex); });
}

(答案基本上是调用一个命名函数，它使循环中的每个变量保持独立。)

我今天的问题是，上面的示例代码中到底发生了什么？每个警报调用都会传递相同的 copyindex 变量，即使每次循环时都会声明一个新变量。

这种行为是JS语言所要求的吗？ (通过声明一个具有 block 范围的变量，我实际上是在函数的顶部声明它。)

或者，这可能是我测试过的少数浏览器的实现细节， future 的 JS 平台没有义务将 copyindex 的许多实例链接在一起？

Answer 1

Each alert call is being passed the same copyindex variable, even though a new one is being declared each time...

这是一个常见的误解。 var 没有 block 范围，所以你的代码真的是这样的:

var copyindex;
for (var myindex = 0; myindex < mylist.length; myindex += 1) {
    copyindex = myindex;
    MyAsync(mylist[myindex], function () { alert(copyindex); });
}

更多(在我的博客上):Poor, misunderstood var当然，在规范中——它包含在 §10.5 - Declaration Binding Instantiation 中.

---

ES6 将通过 let 关键字引入 block 作用域变量。 使用 let 关键字的位置非常重要。

让我们举一个更简单的例子，从 var 开始:

for (var x = 0; x < 3; ++x) {
    setTimeout(function() { console.log("x = " + x); }, 0);
}
console.log("typeof x = " + typeof x);

我们知道这会给我们

number333

...because var is hoisted to the top of the scope, and so the same x is used by all three functions we create, and x exists outside the loop. (We see the typeof result first, of course, because the others happen after the minimal timeout.)

If we use let instead, in that same place:

for (let x = 0; x < 3; ++x) {
    setTimeout(function() { console.log("x = " + x); }, 0);
}
console.log("typeof x = " + typeof x);

我们得到

undefined333

...because x is scoped to the loop, not loop iterations. All three functions still use the same x, the only difference is that x doesn't exist outside the loop.

But if we use let within the body:

for (let n = 0; n < 3; ++n) {
    let x = n;
    setTimeout(function() { console.log("x = " + x); }, 0);
}
console.log("typeof x = " + typeof x);

我们得到

undefined012

...因为现在 x 的范围是每次迭代的主体，而不是整个循环。

您可以使用 NodeJS 自己尝试这些，只需确保为其提供 --harmony 标志以启用 ES6 功能。