輕松學習 JavaScript——第 5 部分：簡化函數提升
為了理解函數提升，讓我們從以下代碼開啟我們的學習之旅：
console.log(foo);
var foo = 9;</pre>
應該輸出什麽呢？
在任何其他編程語言中，這裏的輸出將會是reference error。但是，在JavaScript中，你將得到undefined作為輸出。為什麽？因為JavaScript會提升變量到執行上下文的頂部。執行上下文可以是聲明變量的函數，也可以是聲明變量的JavaScript文件。所以，讓我們用函數重寫上面的代碼片段：
function abc() {
console.log(foo);
var foo = 9;
}
abc();
這裏，變量“foo”提升到函數abc執行上下文的頂部；這意味著你可以在聲明之前訪問foo。簡而言之，無論何時你聲明一個變量，JavaScript解釋器都可以將其分成兩個語句：
- 聲明一個變量。
- 賦值。
變量的聲明位於執行上下文的頂部，而賦值發生在創建變量的位置。所以上面的代碼片段被分解成兩個語句，如下圖所示：
image
變量foo被提升到函數abc的執行上下文的頂部，因此當你在聲明之前使用它時，你會得到“undefined”作為輸出。
請記住，使用let語句聲明的變量不會被提升到執行上下文的頂部。
現在你知道JavaScript中的變量是如何被提升的了，接下來讓我們來探討JavaScript中的函數提升。在JavaScript中，可以通過兩種方式來創建函數：
- 作為聲明而創建的函數。
- 作為表達式而創建的函數。
作為聲明或語句創建的函數作為一個整體提升到執行上下文的頂部。但是，作為表達式創建的函數會像變量一樣提升。
為了說明這一點，讓我們創建一個作為語句的函數：
foo();
function foo() {
console.log("hello");
}
在上面的代碼中，如果你在函數創建之前使用函數，那麽你會得到hello的輸出。發生這種情況的原因是，作為語句創建的函數會當作一個整體被提升到執行上下文的頂部。
無論何時創建作為語句的函數，都可以在函數創建之前使用該函數。因此，如果你在第5行創建作為語句的函數，那麽你可以在第1-4行中使用該函數，因為函數語句會隨函數主體一起提升到執行上下文的頂部。
函數語句會隨函數主體一起提升到執行上下文的頂部。
函數表達式會像一個變量一樣被提升到執行上下文的頂部。請看下面的代碼：
foo();
var foo = function () {
console.log("hello");
}
你正在代碼中創建函數foo作為表達式，所以JavaScript會像普通變量一樣提升它。 JavaScript會像下圖所示那樣處理上面的代碼：
image
正如你在上面的圖片中看到的那樣，foo在執行上下文的頂部被聲明為一個變量，然而，在變量foo中的函數賦值發生在第6行，也就是創建作為表達式函數的地方。所以，當你嘗試執行上面的代碼時，你會得到錯誤undefined is not a function，如下圖所示：
image
因此，你不能在函數表達式被創建之前使用函數表達式，因為只有函數聲明會提升到頂部。
綜上所述：
- 函數語句隨函數主體一起被提升到執行上下文的頂部。你可以在函數創建之前使用作為語句創建的函數。
- 函數表達式在創建之前不能使用。只有聲明部分會被提升，賦值發生在創建函數的那一行。
歡迎加入學習交流群569772982，大家一起學習交流。
輕松學習 JavaScript——第 5 部分：簡化函數提升