javascript變數提升詳解

js變數提升

對於大多數js開發人員來說，變數提升可以說是一個非常常見的問題，但是可能很多人對其不是特別的瞭解。所以在此，我想來講一講。

先從一個簡單的例子來入門：

a = 2;var a;console.log(a);

你覺得以上的代碼會輸出什嗎？是輸出undefined嗎？如果是按照程式的自上而下執行的話，那麼這一段代碼確實是輸出undefined。然而，javascript並不是嚴格的自上而下執行的語言。

這一段代碼的輸出結果是2，是不是感到很意外？為什麼會這樣呢？這個問題的關鍵就在於變數提升(hoisting)。它會將當前範圍的所有變數的聲明提升到程式的頂部，因此上面的代碼其實等價於以下代碼。這樣是不是就很簡單明了了。

var a;a = 2;console.log(a);

那麼接下來，我們再來看這個例子。

console.log(a);var a = 2;

你覺得以上的代碼會輸出什嗎？是直接報ReferenceError嗎？還是輸出2呢？

其實以上代碼會輸出undefined。為什麼呢？我們之前說過，js會將變數的聲明提升到頂部，可是指派陳述式並不會提升。對於js來說，其實var a = 2是分為兩步的:

1. var a;
2. a = 2;

而js只會將第一步提升到頂部，所以上面的語句等價於：

var a;console.log(a);a = 2;

為什麼有變數提升

那麼為什麼會出現變數提升這個現象呢？

js和其他語言一樣，都要經曆編譯和執行階段。而js在編譯階段的時候，會搜集所有的變數聲明並且提前聲明變數，而其他的語句都不會改變他們的順序，因此，在編譯階段的時候，第一步就已經執行了，而第二步則是在執行階段執行到該語句的時候才執行。

變數聲明

js的變數聲明其實大體上可以分為三種：var聲明、let與const聲明和函式宣告。

函式宣告與其他聲明一起出現的時候，就可能會引起一些困擾。我們來看下面的例子。

foo();function foo() {    console.log('foo');}var foo = 2;

你覺得上面會輸出什嗎？TypeError嗎？其實輸出的結果是foo。這就引出了我們的問題了，當函式宣告與其他聲明一起出現的時候，是以誰為準呢？答案就是，函式宣告高於一切，畢竟函數是js的第一公民。

那麼，下面的例子呢？

foo();function foo() {    console.log('1');}function foo() {    console.log('2');}

當出現多個函式宣告，那怎麼辦呢？以上代碼輸出結果為2。因為有多個函式宣告的時候，是由最後面的函式宣告來替代前面的。

想必經曆了以上的例子，你應該已經對變數聲明已經有一定的瞭解了。那麼我再來出一道題目來測試下。

foo();var foo = function() {    console.log('foo');}

這道題目是不是非常簡單啊？這道題和上面的第二道例子其實是一樣的。var foo = function() {}這種格式我們叫做函數運算式。

它其實也是分為兩部分，一部分是var foo,而一部分是foo = function() {}，參照例2，我們可以知道，這道題的結果應該是報了TypeError(因為foo聲明但未賦值，因此foo是undefined)。

上面我們提到了var聲明，函式宣告，那麼接下來我們來講講let和const聲明呢。這個我之前寫過一邊文章，大家可以點擊這裡去查看下。

總結

那麼接下來我們來總結一下。

1. js會將變數的聲明提升到js頂部執行，因此對於這種語句:var a = 2;其實上js會將其分為var a;和a = 2;兩部分，並且將var a這一步提升到頂部執行。
2. 變數提升的本質其實是由於js引擎在編譯的時候，就將所有的變數聲明了，因此在執行的時候，所有的變數都已經完成聲明。
3. 當有多個同名變數聲明的時候，函式宣告會覆蓋其他的聲明。如果有多個函式宣告，則是由最後的一個函式宣告覆蓋之前所有的聲明。