Hoisting 提升

CHEN
3 min readAug 23, 2019

--

今天來聊聊 JavaScript 在創造執行環境的時候做了什麼?

範例一

執行這段程式碼時,打開開發者工具的 conslole 會得到結果:

firefox
hahaha

範例二

執行這段程式碼時,打開開發者工具的 conslole 會得到結果:

firefox
undefined

範例三

執行這段程式碼時,打開開發者工具的 conslole 會得到結果:

firefox
a is not defined

為什麼範例二的 console.log(a) 是出現 undefined 呢?
為什麼還能既具執行 function 呢?

這樣的步驟稱為「Hoisting」提升現象,即使函數在之後才宣告,依然執行它。而 console.log(a) 的結果跑出 undefined 雖然不是我們要的結果,但依然是可以使用的,所以不會得到像範例三的錯誤或是 not defined。

我們寫的 code 並不是直接被執行,而是 JavaScript 轉成電腦看得懂的東西。

JavaScript
Photo by Kobu Agency on Unsplash

接下來,我們來了解執行環境中的創造(creation)階段,在創造階段時全域物件this 已經存在記憶體中。

變數與函數是在創造階段被設定的,這個步驟就是「Hoisting」提升現象。並不是真的把你寫的程式碼移到最上方,在你逐行執行程式碼的時候,JavaScript 的變數以及函數已經在記憶體中。

Photo by Fotis Fotopoulos on Unsplash

而變數的情況有些不同,JavaScript 為 a 變數空出記憶體空間,因為她不知道值的答案是什麼,直到它被執行後才知道。因此會在console.log(a) 的結果跑出 undefined 替代文字。

undefined --->「我還不知道它的值」

即使我們 var a; 不放值進去,console 出來的結果依然是 undefine。因為所有JavaScript 的變數一開始都會被定為 undefine,而函數則是完全被設定好放進記憶體中。

Photo by Kelly Sikkema on Unsplash

結論:

依賴 Hoisting 可能會遇到問題,所以並不是個好的使用方法。所以建議使用範例一的方法會比較妥當。

我們可以呼叫函數,就算它之後才做宣告,因為我們寫的 code 不會直接被執行,而會經過 JavaScript 的轉換。

MDN "Hoisting 提升"參考文件

--

--

CHEN
CHEN

No responses yet