[JavaScript] JavaScript 編譯的特性「Hoisting」

[JavaScript] JavaScript 編譯的特性「Hoisting」

我們一般在撰寫 JavaScript 的編碼時,往往會認為正在撰寫的 應用 會照著我們撰寫的程式碼一行一行的執行,其實並不盡然~

我們寫的程式碼會先被 JavaScript 的編譯器進行轉換,將之轉換成給電腦執行的編碼,這邊將舉例來說明 JavaScript 其中的一項編譯的特性「Hoisting」,對其有個初步了解,可以幫你避免掉一些非預期的錯誤!


什麼是 Hoisting ?

直接在實例中說明:

var x;
x = 10;
alert(x)

這段基本的程式宣告 return 出的結果就是 10,相信這部分大家都是沒有問題的,但如果我把編碼改成如下:

x = 10;
var x;
alert(x)

你會發現 return 出來的結果一樣還是 10,而在大多數的程式語言中,其實都是會噴錯的,一般使用上的習慣(涵蓋 JavaScript),都是必須要先宣告,才可以使用變數,而為什麼在 JavaScript 是可以執行又不會噴錯?

因為 JavaScrip 在進行編碼時,會將 宣告變數 這個事件 優先 進行編譯,你也可以把它想像成把 宣告變數 的這段 code 提升到程式碼的最上面先執行,而 JavaScript 的這個特性,就被稱之為 「Hoisting」


深入了解:

再舉一個例子:

alert(x);
var x = 10;

如果你有認真看完了上面的舉例,根據 Hoisting 的特性,return 出來的結果應該也是 10,但其實 return 出來的結果其實是 undifind,你一定會跟納悶,怎麼並非是預期的結果

其實上面的例子來說,根據 Hoisting 的特性,下面才是 JavaScript 的結果:

var x;
alert(x);
x = 10;

雖然我們在 var x = 10; 時,把 宣告給值,這兩件事情給寫在同一行,但根據 Hoisting 的特性,在進行程式編譯時,只會把 宣告 這個事件給提升,所以才會產生了 undifind 的結果.


函式的宣告:

函數的部分,也用與 變數宣告 相同,也是根據 Hoisting 的特性在做編譯:

//宣告函式
function test(){
 alert(123)
}
//呼叫函式
test();

而函式的宣告這是我們 最常犯錯 的部分

JavaScript 會因為不同的設計模式,使用不同的方式來定義函式,而定義函式的方式又有分很多種方式,因為這不是這篇文章的重點,所以我不在這篇文章特別說明(有興趣可以參考這篇文章:javascript函式的宣告),常常會因為上述情境,發生了一些非預期的錯誤

不過相信對「Hoisting」的了解,可以幫助你避開大部分的錯誤


補充:

另外附上一篇很棒的教學影片:

Facebook 功能: