Javascript 的 Scope 是如何工作的，出现意外行为？

Question

这是一段代码示例，类似于让我悲伤的代码：

for(var i=0;i<3;i++){
    var Proof = true
    if (i == 0){
        Proof = false
        //var CallBack = function(){alert(Proof);}; // true????
        var CallBack = function(){alert(i);};
    }
}

// Whatever happened to local scope? shouldn't CallBack be undefined now?
CallBack()// alert(3), should be 0?

CallBack 不是未定义的，它会发出 true 或 3 警报，有人可以向我解释一下是怎么回事让它像这样吗？是否有一些我缺少的本地关键字，或者 JS 没有范围？我没有使用任何框架，希望能得到一些帮助来解决这个问题，并正确地做这种事情......

Answer 1

JavaScript 根本没有块作用域（但是，见下文）。所有变量都在它们出现的整个函数中声明（或在全局范围内，如果它们在全局范围内）。

假设您引用的代码是其范围内的唯一代码，它完全相同与此相同：

var i;
var Proof;
var Callback;

for(i=0;i<3;i++){
    Proof = true
    if (i == 0){
        Proof = false
        //CallBack = function(){alert(Proof);}; // true????
        CallBack = function(){alert(i);};
    }
}

// Whatever happened to local scope? shouldn't CallBack be undefined now?
CallBack()// alert(3), should be 0?

更多（在我的博客上）：Poor, misunderstood var

---

CallBack()// alert(3), should be 0?

不，3 是正确的，因为这是 i 在调用 CallBack 时的值。 CallBack 是对创建它的上下文的闭包。它具有对上下文（包括i 变量）的持久引用，而不是创建时存在的内容的副本。

如果您想获得0，则必须让CallBack 关闭i 以外的其他内容，这不会改变。执行此操作的典型方法是使用您将值传递到的构建器函数：

function buildCallBack(index) {
    return function() { alert(index); };
}

然后：

CallBack = buildCallBack(i);

i 的值作为参数index 传递给buildCallBack。 buildCallBack 创建一个函数，关闭该调用的上下文 buildCallBack 并使用该 index 参数。由于该参数的值永远不会更改，因此回调警报0（在这种情况下）而不是3。

更多（在我的博客上）：Closures are not complicated

---

我上面说“还”的原因是，下一版本的规范（ES6）将为新的let 和const 关键字和块函数声明引入新的block-scope semantics。 var 将保持不变，但如果您使用 let 来声明变量，则它具有块范围而不是函数/全局范围。

Answer 2

当 CallBack 被调用时，for 循环已经完成。所以i 等于 3。

如果你想让i 是本地的，你应该这样写：

var CallBack;
for(var i=0;i<3;i++){
    (function(index) {
        var Proof = true
        if (index == 0){
            Proof = false
            //var CallBack = function(){alert(Proof);}; // true????
            CallBack = function(){alert(index);};
        }
    })(i);
}

CallBack()

这是demo

更新

这里有一个替代方案：

var CallBack;
for(var i=0;i<3;i++){
    var Proof = true
    if (i == 0){
        Proof = false
        CallBack = (function(index) {
            return function(){alert(index);};
        })(i);
    }
}

CallBack()

demo

更新 2

解释：

通过写(function(index) {...})(i)，我们声明了一个匿名函数并立即调用它（我们也可以写function(index) {...}(i)，但我认为第一种情况更清楚）。在 javascript 中，function 也是一种设置另一个变量范围的方法，因此在我们的例子中，我们“记住”了 index 变量中 i 变量的当前状态，该变量仅在我们的匿名函数中可见。

当调用 'CallBack' 时，alert 显示 0，因为调用该函数时 i 等于 0。