javascript - JavaScript `var` 关键字的混淆操作

Question

我遇到了一个关于 var 关键字的(对我来说)非常奇怪的问题。我已将它简化为一个相当小的测试用例，并发现它在 Node.js(因此是 V8 和 Chrome)、Safari 4 的检查器(因此是 Nitro)和 FireBug(显然是 SpiderMonkey)中都有展示。我最初是准备一份错误报告，但由于它被广泛展示，我假设我完全误解了 JavaScript 应该如何确定范围和查找变量。

测试用例非常小，在 GitHub 上:http://gist.github.com/260067 .第一个示例和第二个示例之间的唯一区别是包含了 var 关键字。

这里还有一个类似的测试用例，它以不同的方式展示了相同的“问题”:https://gist.github.com/698b977ee0de2f0ee54a

编辑:为了排除更多试图解释级联作用域如何工作的答案，我对此非常熟悉。我的问题是，我不明白为什么以下代码“有效”(因为它 alert() 是“outer”，然后是“inner”，然后又是“outer”):

(function(){
  var foo = 'outer';
  alert("Outer `foo`: " + foo);

  (function(){
    foo = 'inner';
    alert("Inner `foo`: " + foo);

    var foo;
  })();

  alert("Outer `foo`: " + foo);
})();

var foo; 出现在与 foo 的重新赋值完全不相关的位置；那么为什么它会以非常实质性的方式影响该作业？

Answer 1

问题在于，与其他语言不同，JavaScript 在函数的开头创建所有变量。这意味着代码:

(function(){
    if(myVar == undefined){
        alert(myVar);
    }
    if(myVar == undefined){
        var myVar = 5;
    }
})();

实际上被编译解释为

(function(){
    var myVar;
    if(myVar == undefined){
        alert(myVar);
    }
    if(myVar == undefined){
        myVar = 5;
    }
})();

要创建一个变量并且只在 if 或循环 block 中使用它，你必须使用 let ，这是一项新的 JavaScript 功能。我不确定有多少浏览器实现了它(如果您使用 <script type="text/javascript;version=1.7">，Firefox 3.5 会实现)。

(function(){
    if(myVar == undefined){
        alert(myVar);
    }
    if(myVar == undefined){
        let myVar = 5;
    }
})();