迷惑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()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; 那么为什么它会以非常实质的方式影响这项任务呢？

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

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