今天這篇文章，我們將了解 JavaScript 提供的黑盒，讓我們的代碼神奇地運行“執(zhí)行上下文”。

　　這是迄今為止最重要的主題之一，它可以使你對其他關(guān)鍵主題一目了然，例如，作用域、詞法作用域、閉包和提升，而且學(xué)習(xí)JavaScript的真正工作原理很有趣。

　　到目前為止，在代碼編輯器(Vs code )中編寫的每一行混亂代碼都在我們現(xiàn)在將討論的這個執(zhí)行上下文中運行。

　　坐下來，放松一下，收拾好你的美食，因為我會讓你明白的。

　　在 JavaScript 中，一切都發(fā)生在執(zhí)行上下文中，我的意思是一切。你可以將其視為評估和執(zhí)行 JavaScript 代碼的環(huán)境。

　　每當(dāng)你的瀏覽器與任何 JavaScript 代碼交叉路徑時，瀏覽器的 JavaScript 引擎就會創(chuàng)建一個特殊的環(huán)境來處理此 JavaScript 代碼的轉(zhuǎn)換和執(zhí)行。這個環(huán)境被稱為執(zhí)行上下文。

　　執(zhí)行上下文包含當(dāng)前正在運行的代碼以及有助于其執(zhí)行的所有內(nèi)容。

　　執(zhí)行上下文的類型

　　當(dāng)你在瀏覽器中運行腳本時，javascript 引擎會創(chuàng)建不同類型的執(zhí)行上下文。

　　全局執(zhí)行上下文 (GEC)

　　當(dāng)你第一次運行腳本或你的代碼不在任何函數(shù)中時，它會被放置在全局執(zhí)行上下文 (GEC) 中。

　　在這里，每當(dāng) JavaScript 引擎接收到一個腳本文件時，它首先會創(chuàng)建一個默認(rèn)執(zhí)行上下文，這就是我們所說的全局執(zhí)行上下文 (GEC)。它是一個基本/默認(rèn)執(zhí)行上下文，所有不在函數(shù)內(nèi)部的代碼都會在其中執(zhí)行。

　　注意：每個 JavaScript文件只有一個 GEC

　　函數(shù)執(zhí)行上下文 (FEC)

　　每當(dāng)你的 JavaScript 引擎遇到函數(shù)調(diào)用時，它都會在全局執(zhí)行上下文中創(chuàng)建一種稱為函數(shù)執(zhí)行上下文的不同類型的 EC，以評估和執(zhí)行該函數(shù)內(nèi)部編寫的代碼。

　　每個函數(shù)調(diào)用都有自己的 FEC(即使你多次調(diào)用同一個函數(shù))，因此，在腳本運行時可以有多個 FEC。

　　它們是如何創(chuàng)建的?

　　現(xiàn)在執(zhí)行上下文的創(chuàng)建分兩個階段進行：

　　創(chuàng)建階段

　　執(zhí)行階段

　　1、創(chuàng)建階段

　　在此階段，將創(chuàng)建一個執(zhí)行上下文對象 (ECO)，其中包含我們的代碼在其運行時(執(zhí)行階段)使用的重要信息/數(shù)據(jù)。

　　屬性在此對象 (ECO) 中分三個不同階段進行設(shè)置和定義。

　　創(chuàng)建變量對象 (VO)。

　　創(chuàng)建范圍鏈。

　　賦予此關(guān)鍵字價值。

　　階段 1：變量對象的創(chuàng)建

　　變量對象就像一個在執(zhí)行上下文中創(chuàng)建的容器，它將變量和函數(shù)聲明存儲在鍵：值對(不是函數(shù)表達(dá)式)中。

　　在 GEC 中，使用 var 關(guān)鍵字聲明的每個變量都會向指向該變量的變量對象添加一個屬性，并將其值設(shè)置為未定義，使用 let 或 const 聲明的變量獲取未初始化的值，而在函數(shù)聲明中，一個屬性被添加到指向該函數(shù)的變量對象中，所有的函數(shù)聲明都將被存儲并可以在 VO 中訪問，甚至在代碼開始運行之前。

　　在 FEC 中，不會創(chuàng)建此變量對象，而是構(gòu)造了一個名為“argument”的類似數(shù)組的對象，其中包括提供給該函數(shù)的所有參數(shù)。

　　這種甚至在代碼執(zhí)行之前就將變量和函數(shù)(聲明)存儲在內(nèi)存中，這就是我們所說的提升。

　　第 2 階段：創(chuàng)建范圍鏈

　　在 JavaScript 中，作用域是一種了解一段代碼對腳本其他域的可訪問性的方法。

　　每個函數(shù)執(zhí)行上下文都會創(chuàng)建它的作用域，可以將其視為一個環(huán)境或空間，它定義的變量和函數(shù)可以通過一個稱為作用域的進程來訪問。現(xiàn)在，當(dāng)一個函數(shù)(比如 X() )在另一個函數(shù)(比如 Y() )中定義時，這個內(nèi)部函數(shù) X() 將可以訪問變量，并且在外部函數(shù) Y() 中定義的其他函數(shù)也將具有訪問外部函數(shù)的代碼，但事情并不止于此，它還可以訪問其父元素的代碼等等，直到 GCE，這種行為就是我們所說的詞法作用域，但反過來不是真的。

　　這個作用域的概念在JavaScript 中引發(fā)了一個被稱為閉包的相關(guān)現(xiàn)象，即使在外部函數(shù)執(zhí)行完成之后，內(nèi)部函數(shù)也可以訪問與外部函數(shù)關(guān)聯(lián)的代碼……它已經(jīng)死了，消失了，很久了走了。

　　讓我們再看一個例子來理解作用域鏈。

　　這里變量 a 和 b 沒有在函數(shù) second() 中定義，它只能訪問在其自己的范圍(本地范圍)中定義的變量 c，但是由于詞法范圍，它可以訪問它所在的函數(shù)以及它的父母。因此，當(dāng)你運行此代碼時，JavaScript 引擎將無法找到變量 a 或 b，因此，它將沿著執(zhí)行上下文鏈?zhǔn)紫日业?b 并解析它，因為它已在函數(shù) first() 范圍內(nèi)成功找到它，解析后繼續(xù)查找變量 a ，JavaScript 引擎為該變量一直到全局執(zhí)行上下文并解析它。

　　這個 JavaScript 引擎沿著不同執(zhí)行上下文鏈向上的過程，或者我們可以說遍歷執(zhí)行上下文的范圍以解析變量或函數(shù)調(diào)用/調(diào)用，稱為 Scope Chaining。

　　第 3 階段：設(shè)置“this”關(guān)鍵字的值

　　在 javascript 中，this 關(guān)鍵字是指執(zhí)行上下文所屬的范圍。

　　在 GEC 中，這指的是一個全局對象，在瀏覽器的情況下是一個窗口對象。因此，在函數(shù)聲明中，使用“var”關(guān)鍵字初始化的變量分別作為方法和屬性分配給這個全局對象。

　　所以

　　與以下內(nèi)容相同

　　但在 FEC 的情況下，它不會創(chuàng)建“this”關(guān)鍵字，而是可以訪問定義它的環(huán)境的關(guān)鍵字。

　　執(zhí)行階段

　　在執(zhí)行上下文的這個階段，我們的代碼開始執(zhí)行，執(zhí)行后從執(zhí)行堆棧或調(diào)用堆棧彈出，我們將在本文后面介紹。

　　到目前為止，Variable 對象包含值為 undefined 和 uninitialized 的變量，具體取決于變量是分別使用 var 關(guān)鍵字還是使用 let/const 聲明的。

　　這里 JavaScript引擎再次讀取 EC 中的代碼，用它們的實際值更新這些變量。然后代碼被解析，被轉(zhuǎn)譯，最后被執(zhí)行

　　執(zhí)行堆棧(調(diào)用堆棧)

　　你有沒有想過 JavaScript 引擎如何跟蹤它在腳本運行時創(chuàng)建的各種 EC 的所有這些創(chuàng)建和刪除?答案是執(zhí)行堆棧或簡單的調(diào)用堆棧。

　　“JavaScript 是一種同步的單線程語言”

　　單線程是指它只能夠一次執(zhí)行一個任務(wù)，一次是一行代碼，而同步是指這些任務(wù)的執(zhí)行以特定的順序發(fā)生。因此，當(dāng) JavaScript 引擎讀取腳本時，它會創(chuàng)建不同的執(zhí)行上下文并將它們存儲在稱為調(diào)用堆棧或執(zhí)行堆棧的堆棧數(shù)據(jù)結(jié)構(gòu)中。

　　當(dāng)腳本在瀏覽器中加載時，瀏覽器的 JS 引擎首先會創(chuàng)建一個我們在上面詳細(xì)介紹過的默認(rèn)特殊環(huán)境，即全局執(zhí)行上下文，并將其推送到此執(zhí)行堆棧。

　　之后，當(dāng) JS 引擎發(fā)現(xiàn)函數(shù)調(diào)用時執(zhí)行文件時，它會為其創(chuàng)建一個單獨的函數(shù)執(zhí)行上下文，如下圖所示(步驟 2)，并將其推送到現(xiàn)有默認(rèn) GEC 之上的堆棧中。

　　在執(zhí)行 firstFunc() 時，它遇到對 secondFunc() 的調(diào)用，它暫停 firstFunc() 的執(zhí)行并創(chuàng)建另一個 FEC 并推送到 firstFunc() FEC 頂部的堆棧，然后再次為 thirdFunc() 創(chuàng)建一個單獨的 FEC 稱呼。

　　頂部的 EC 將首先由 JS 引擎執(zhí)行，執(zhí)行完成后，它會從堆棧中彈出，并開始執(zhí)行上一個活動 EC 下面的 EC，如上圖所示，直到到達(dá) GEC。

　　結(jié)論

　　執(zhí)行上下文是 JavaScript 的核心，理解它很重要，因為它可以幫助你正確理解其他主要概念。