迷惑JavaScript`var`关键字的操作

我用var关键字遇到了一个非常奇怪的问题.我把它减少到一个相当小的测试用例,并发现它在Node.js(因此,V8和Chrome),Safari 4的检查员(因此,Nitro)和FireBug(显然,SpiderMonkey)中展示.我最初正在准备一个错误报告,但由于它被广泛展示,我将假设我完全误解了 JavaScript应该如何范围和查找变量.

测试用例非常小,在GitHub上这里：http://gist.github.com/260067.第一个和第二个例子的唯一区别是包含var关键字.

这里也是一个类似的测试案例,它以不同的方式表现出同样的“问题”：https://gist.github.com/698b977ee0de2f0ee54a

编辑：为了排除试图解释级联范围如何工作的更多答案,我对此非常熟悉.我的问题是,我不明白为什么以下代码“有效”(因为它警告()s’外部’,后跟’内部’,然后再’外部’)：

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

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

    var foo;
  })();

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

var foo;发生在与foo的重新分配完全无关的位置;那么为什么它会以非常实质的方式影响这项任务呢？

解决方法

事实是,与其他语言不同,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或loop块中使用它,你必须使用let,这是一个新的JavaScript功能.我不确定有多少浏览器实现它(如果你使用< script type =“text / javascript; version = 1.7”>,Firefox 3.5会这样做).

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