即使變量聲明沒有「var」關鍵字，爲什麼我會得到「Uncaught ReferenceError」？

Question

我所遇到下面的代碼片段：

(function() { 
 
    bar = 5; 
 
    var bar = 10; 
 
    console.log("value of bar inside the self invoking function = " + bar); 
 
})(); 
 
console.log("value of bar out of function scope " + bar);

當我執行上面的代碼，我得到：

「未捕獲的ReferenceError」

爲第二個控制檯

Answer 1

這是由於「變量提升」。當javascript被解析時聲明變量，所以當執行時引擎已經知道在一個範圍內可用的所有變量，因此可以分配給它們。吊裝過程完成後，你的功能看起來就像這樣。

(function() { 
 
    var bar; 
 
    bar = 5; 
 
    bar = 10; 
 
    console.log("value of bar inside the self invoking function = " + bar); 
 
})(); 
 

 
console.log("value of bar out of function scope " + bar);

你可以閱讀更多關於它的MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting

Answer 2

與var聲明的所有變量都提升到在聲明它們的函數的頂部，因此，如果變量被定義在函數內部，它將被移動到函數的頂部，並且如果它在全局範圍中被定義，它將被移動到全局上下文的頂部。

(function() { 
    bar = 5; 
    var bar = 10; 
    console.log("value of bar inside the self invoking function = " + bar); 
})(); 

在這裏，你的情況，你已經定義的變量的匿名函數裏面，所以它會被移動到該函數的頂部，並提升它會像

(function() { 
    var bar; 
    bar = 5; 
    bar = 10; 
    //...rest of the code 
})(); 

但這個變量之後僅在該功能的本地範圍中可用，它在全局範圍內不可用。這就是爲什麼當您試圖在全球範圍中訪問Uncaught ReferenceError時。

這裏是一篇很好的文章，解釋JavaScript中的變量範圍和變量提升。 http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/

有一點要注意的是，只有使用var聲明的變量懸掛。如果您使用ES6 let關鍵字來聲明變量，那麼它將不會被掛起。所以

(function() { 
    bar = 5; 
    let bar = 10; 
    console.log("value of bar inside the self invoking function = " + bar); 
})(); 

將無法​​正常工作，你會得到同樣的錯誤。你可以閱讀更多關於它here