JavaScript變量範圍不期待結果

Question

第二個console.log文件中bar怎麼回事？它不應該是「安迪」或拋出一個參考錯誤？另外，爲什麼foo未定義？

使用Chrome。

// lexical scope example 
var bar = "Andy"; 
try { 
    console.log(bar); // Andy 
    (function() { 
     console.log(bar); // undefined! 
     var bar = "B", 
      foo = "Last Name"; 
     console.log(bar); // B 
     console.log(foo); // Last Name 
    })(); 
    console.log(bar); // B 
    console.log(foo); // Reference Error 
} catch (e) { 
    console.log(e); 
}​ 

的jsfiddle以上的： http://jsfiddle.net/2D9fj/3/

Answer 1

開始(function() {的行創建一個範圍/閉合包圍巴，FOO乏其值不被外部範圍有效/閉合

Answer 2

的VAR聲明被解析後，你的代碼看起來像（這就是爲什麼很多開發人員將它們的變量定義在頂部）

// lexical scope example 
var bar = "Andy"; 
try { 
    console.log(bar); // Andy 
    (function() { 
     var bar, foo; 
     console.log(bar); // undefined! 
     bar = "B"; 
     foo = "Last Name"; 
     console.log(bar); // B 
     console.log(foo); // Last Name 
    })(); 
    console.log(bar); // B 
    console.log(foo); // Reference Error 
} catch (e) { 
    console.log(e); 
}​ 

Answer 3

Andrew的答案是正確的，但我認爲提供一個僅舉例說明提升概念的例子是有用的，不需要額外的代碼。

// this: 
function foo() { 
    console.log(x); 
    var x = 1; 
} 

//is actually interpreted like this: 
function foo() { 
    var x; 
    console.log(x);// undefined 
    x = 1; 
} 

此外，封閉與此問題有關，但僅限於它使得識別吊裝錯誤變得更加困難。

(function parent() { 
    // x declared and assigned in parent scope 
    var x = 2; 

    function foo() { 
     console.log(x); // 2 (closed around parent scope) 
    } 

    function bar() { 
     console.log(x); // undefined (bar scope, x declaration is hoisted, but not defined yet) 
     var x = 1; 
    } 
    function baz() { 
     var x = 3; 
     console.log(x); // 3 (baz scope, defined) 
    } 
    //run 
    foo(); 
    bar(); 
    baz(); 
}());