本文主要給大家介紹了關(guān)于JavaScript中Hoisting(變量提升與函數(shù)聲明提升）的相關(guān)內(nèi)容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。

如何將 函數(shù)聲明 / 變量 “移動” 到作用域的頂部。

術(shù)語 Hoisting(提升) 在很多 JavaScript 博文中被用來解釋標識符的解析。其實 Hoisting(提升) 這個詞是用來解釋 變量 和 函數(shù)聲明 是如何被提升到 函數(shù)或全局 作用域頂部的。你在任何的 JavaScript 文檔中找不到這個術(shù)語，我們說的 Hoisting(提升) 只是使用了其字面含義來做個比喻。

如果你已經(jīng)對 JavaScript 作用域工作原理有基本的了解，那么更深入的了解 Hoisting(提升) 有助于你建立更強大的基礎(chǔ)知識。（愚人碼頭注：作為 JavaScript 中的一個總要概念，變量提升和函數(shù)聲明提升經(jīng)常在前端開發(fā)面試時被問及，或者在前端開發(fā)筆試題中出現(xiàn)?？梢娏私?Hoisting(提升) 的重要性。）

為了更好地理解基礎(chǔ)知識，讓我們來回顧一下 “Hoisting(提升)” 到底意味著什么。另外，給你一個提醒，JavaScript 是一種解釋性語言，這不同于編譯性語言，這意味著JS代碼是逐行執(zhí)行的。

請考慮以下示例：

console.log(notyetdeclared);
// 打印 'undefined'
 
var notyetdeclared = 'now it is declared';
 
hoisting();
 
function hoisting(){
 console.log(notyetdeclared);
 // 打印 'undefined'
 
 var notyetdeclared = 'declared differently';
 
 console.log(notyetdeclared);
 // 打印 'declared differently'
}

在分析上面的示例代碼之后，提出幾個問題：

• 第 6 行，該函數(shù)聲明之前為何能訪問？
• 第 1 行，沒有拋出錯誤，是因為這時變量 notyetdeclared 不存在嗎？
• 第 4 行，notyetdeclared 已經(jīng)在全局作用域內(nèi)聲明了，為什么在第 9 行打印時還是  undefined 呢？

JavaScript 是非常合乎邏輯的，所有這些奇怪問題都有一個明確的解釋。

我們從頂部開始解釋，當代碼在 JavaScript 中執(zhí)行時，就會建立一個執(zhí)行期上下文。 JavaScript 中有兩種主要的執(zhí)行期上下文類型 – 全局執(zhí)行期上下文和函數(shù)執(zhí)行期上下文（愚人碼頭注：特別注意，執(zhí)行期上下文和我們平常說的上下文不同，執(zhí)行期上下文指的是作用域，而平常說的上下文是 this 的取值指向）。由于 JavaScript 是基于單線程執(zhí)行模型，所以每次只能執(zhí)行一段代碼。

對于我們上面的代碼，這個過程如圖所示：

上述示例代碼的調(diào)用棧:

• 程序從棧(stack)上的全局執(zhí)行期上下文開始執(zhí)行。
• 當調(diào)用 hoisting() 函數(shù)時，將一個新的函數(shù)執(zhí)行期上下文推到棧(stack)上，并且全局執(zhí)行期上下文被暫停。
• 在 hoisting() 執(zhí)行完成后 , hoisting()執(zhí)行期上下文從棧(stack)中彈出，全局執(zhí)行期上下文恢復(fù)。

這個過程是自解釋的，但并沒有真正解釋我們在執(zhí)行示例代碼時所看到的異常。當執(zhí)行期上下文跟蹤代碼的執(zhí)行情況時，詞法環(huán)境跟蹤標識符到特定變量的映射。詞法環(huán)境基本上是 JavaScript 作用域機制的內(nèi)部實現(xiàn)。通常，詞法環(huán)境與 JavaScript 代碼的特定結(jié)構(gòu)相關(guān)聯(lián)，例如一個函數(shù)或一個 for 循環(huán)代碼塊。每當創(chuàng)建一個函數(shù)時，對其創(chuàng)建的詞法環(huán)境的引用將在一個名為 [[Environment]] 的內(nèi)部屬性中傳遞。

所有這些術(shù)語涵蓋的是一個簡單而非常合乎邏輯的概念。允許將其分解。詞法環(huán)境是一個有趣的名稱，用于跟蹤代碼塊中的變量和函數(shù)。除了跟蹤局部變量、函數(shù)聲明和參數(shù)之外，每個詞法環(huán)境還跟蹤其父級詞法環(huán)境。所以上面的示例代碼在 JavaScript 引擎中會被這樣解析。上述代碼的詞法環(huán)境，如圖所示：

注：

如果理解起來有問題，請查看以下三篇文章：

• 深入理解JavaScript中的作用域和上下文
• JavaScript 核心概念之作用域和閉包
• 實例分析 JavaScript 作用域

為了在詞法環(huán)境中解析標識符， JavaScript 引擎將檢查當前環(huán)境的引用。如果沒有找到引用，則通過使用 [[environment]] 移動到外部環(huán)境。這將一直持續(xù)進行下去，直到標識符被找到，或者拋出一個 ‘not defined'(未定義) 的錯誤。

基本上，JavaScript 代碼的執(zhí)行分為兩個階段。第一個階段在當前詞法環(huán)境中注冊所有的變量和函數(shù)聲明。完成之后，第二個階段的 JavaScript 執(zhí)行就開始了！

所以要詳細說明第一階段：它在兩個步驟中起作用。

• 掃描當前函數(shù)聲明中的代碼。函數(shù)表達式和箭頭函數(shù)會被跳過。對于每個被發(fā)現(xiàn)的函數(shù)，都會創(chuàng)建一個新的函數(shù)，并使用函數(shù)名稱將其綁定到環(huán)境中。如果標識符的名稱已經(jīng)存在，那么它的值就會被覆蓋。
• 然后掃描當前環(huán)境的變量。找到使用 var 定義的變量和放置在其他函數(shù)之外的變量，并注冊一個標識符，其值初始化為 undefined 。如果存在標識符，則該值將保持不變。

注意：用 let 和 const 定義的是塊變量，與 var 的處理稍微不同。在另一篇文章中了解更多的內(nèi)容。

現(xiàn)在你應(yīng)該已經(jīng)對詞法環(huán)境這個基本概念有了一定的了解，那么讓我們回到示例代碼中，并解釋這些問題。

在設(shè)置全局上下文時，將對環(huán)境進行掃描，并將 hoisting() 函數(shù)附加到標識符上。然后在下一步中，變量 notyetdeclared 被注冊，其值初始化為 undefined 。按照這個步驟繼續(xù)理解代碼。

現(xiàn)在我們來解釋示例代碼中提出的3個問題：

第 6 行，該函數(shù)聲明之前為何能訪問？

第1階段， hoisting() 函數(shù)已經(jīng)注冊到了標識符中，當JS代碼在第2階段的全局執(zhí)行期上下文中開始執(zhí)行時，它會查找 hoisting 的詞法環(huán)境，并在其定義之前找到該函數(shù)。

第 1 行，沒有拋出錯誤，是因為這時變量 notyetdeclared 不存在嗎？

同樣的，notyetdeclared 被注冊到了標識符，并在第1階段中初始化為 undefined ，因此不會拋出任何錯誤。

最后，

第 4 行，notyetdeclared 已經(jīng)在全局作用域內(nèi)聲明了，為什么在第 9 行打印時還是 undefined 呢？

現(xiàn)在我們進入函數(shù) hoisting 環(huán)境中。在第1階段中，notyetdeclared 被注冊并初始化為  undefined，因為在這個詞法環(huán)境中，notyetdeclared 的變量還沒有被注冊。如果第 12 行不包含var 關(guān)鍵字，那么情況就不同了。

希望現(xiàn)在可以清楚地看到，在 JavaScript 中 Hoisting(提升) 只是我們用于解釋其背后原理的一個觀點，從技術(shù)上來講，函數(shù)和變量并不會移動到任何地方。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論