為了理解函數提升,讓我們從以下代碼開啟我們的學習之旅: 應該輸出什麼呢? 在任何其他編程語言中,這裡的輸出將會是reference error。但是,在JavaScript中,你將得到undefined作為輸出。為什麼?因為JavaScript會提升變數到執行上下文的頂部。執行上下文可以是聲明變數的 ...
為了理解函數提升,讓我們從以下代碼開啟我們的學習之旅:
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解釋器都可以將其分成兩個語句:
- 聲明一個變數。
- 賦值。
變數的聲明位於執行上下文的頂部,而賦值發生在創建變數的位置。所以上面的代碼片段被分解成兩個語句,如下圖所示:

變數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會像下圖所示那樣處理上面的代碼:

正如你在上面的圖片中看到的那樣,foo在執行上下文的頂部被聲明為一個變數,然而,在變數foo中的函數賦值發生在第6行,也就是創建作為表達式函數的地方。所以,當你嘗試執行上面的代碼時,你會得到錯誤undefined is not a function,如下圖所示:

因此,你不能在函數表達式被創建之前使用函數表達式,因為只有函數聲明會提升到頂部。
綜上所述:
- 函數語句隨函數主體一起被提升到執行上下文的頂部。你可以在函數創建之前使用作為語句創建的函數。
- 函數表達式在創建之前不能使用。只有聲明部分會被提升,賦值發生在創建函數的那一行。