javascript- hoisting介紹

-

hoisting(提升)

什麼是hoisting?
W3school：Hoisting is JavaScript's default behavior of moving declarations to the top
在 JavaScript 裡面，如果你試圖去對一個還沒宣告變數取值，會發生以下錯誤
console.log(a)
// ReferenceError: a is not defined

但如果你這樣寫，會發生神奇的事
console.log(a) // undefined
var a

而這種現象稱為hoisting，var a被提升到最上面了(但這只是想像，實際上程式碼並不會移動)可以想像成這樣：
var a
console.log(a) // undefined
a = 5

你可以把var a = 5這句話分成兩個步驟，第一個階段是宣告變數：var a，第二個階段是賦值：a = 5，只有前面的變數宣告會被提升，賦值不會。

補充：
定義變項的過程中，可以分成宣告(declaration)和給值(initialization)兩個過程，
只有declaration的內容會在逐行執行程式前先被執行並儲存在記憶體中(hoisted)；
給值的內容則是在hoisted後，執行程式時，才會被執行到。
換句話說：
JavaScript 僅提升宣告的部分，而不是初始化。如果在使用該變數後才宣告和初始化，那麼該值將是 undefined MDN說明

小結：變數宣告跟函式宣告都會提升，但僅有宣告會提升(賦予值)並不會。 



接著我們來做個比較，在全域中宣告變數，看順序是否影響結果
A： js 第三行，因為沒有載入宣告變數的值所以出現 undefined
       js 第五行 正常顯示值為10
       js第六行  沒有定義var b，所以出現b is not defined畫面


  • 補充一下函式宣告和函式運算式差異
這兩種定義方式最大的差別在於，透過「函式宣告」方式定義的函式可以在宣告前使用 (函式提升) ：
console.log(square(2)); // 4

function square(number) {
return number * number;
}
而透過「函式運算式」定義的函式則是會出現錯誤：
結論：變數提升的差別在於變數提升只有宣告被提升，而函式的提升則是包括內容完全被提升。

以上內容整理自：
hoisting原理說明(huli介紹hoisting底層運作原理)

留言

張貼留言