[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」的了解,可以幫助你避開大部分的錯誤
補充:
另外附上一篇很棒的教學影片: