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

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

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

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

　　在 JavaScript 中，一切都發生在執行上下文中，我的意思是一切。你可以將其視為評估和執行 JavaScript 代碼的環境。

　　每當你的瀏覽器與任何 JavaScript 代碼交叉路徑時，瀏覽器的 JavaScript 引擎就會創建一個特殊的環境來處理此 JavaScript 代碼的轉換和執行。這個環境被稱為執行上下文。

　　執行上下文包含當前正在運行的代碼以及有助于其執行的所有內容。

　　執行上下文的類型

　　當你在瀏覽器中運行腳本時，javascript 引擎會創建不同類型的執行上下文。

　　全局執行上下文 (GEC)

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

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

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

　　函數執行上下文 (FEC)

　　每當你的 JavaScript 引擎遇到函數調用時，它都會在全局執行上下文中創建一種稱為函數執行上下文的不同類型的 EC，以評估和執行該函數內部編寫的代碼。

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

　　它們是如何創建的?

　　現在執行上下文的創建分兩個階段進行：

　　創建階段

　　執行階段

　　1、創建階段

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

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

　　創建變量對象 (VO)。

　　創建范圍鏈。

　　賦予此關鍵字價值。

　　階段 1：變量對象的創建

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

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

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

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

　　第 2 階段：創建范圍鏈

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

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

　　這個作用域的概念在JavaScript 中引發了一個被稱為閉包的相關現象，即使在外部函數執行完成之后，內部函數也可以訪問與外部函數關聯的代碼……它已經死了，消失了，很久了走了。

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

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

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

　　第 3 階段：設置“this”關鍵字的值

　　在 javascript 中，this 關鍵字是指執行上下文所屬的范圍。

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

　　所以

　　與以下內容相同

　　但在 FEC 的情況下，它不會創建“this”關鍵字，而是可以訪問定義它的環境的關鍵字。

　　執行階段

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

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

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

　　執行堆棧(調用堆棧)

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

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

　　單線程是指它只能夠一次執行一個任務，一次是一行代碼，而同步是指這些任務的執行以特定的順序發生。因此，當 JavaScript 引擎讀取腳本時，它會創建不同的執行上下文并將它們存儲在稱為調用堆棧或執行堆棧的堆棧數據結構中。

　　當腳本在瀏覽器中加載時，瀏覽器的 JS 引擎首先會創建一個我們在上面詳細介紹過的默認特殊環境，即全局執行上下文，并將其推送到此執行堆棧。

　　之后，當 JS 引擎發現函數調用時執行文件時，它會為其創建一個單獨的函數執行上下文，如下圖所示(步驟 2)，并將其推送到現有默認 GEC 之上的堆棧中。

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

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

　　結論

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