JavaScript中執行上下文的作用是什么

這篇文章主要講解了“JavaScript中執行上下文的作用是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript中執行上下文的作用是什么”吧！

JavaScript標準把一段代碼(包括函數)執行所需的所有信息定義為“執行上下文”(可理解為當前代碼的執行環境，同一個函數在不同的環境中執行，會因訪問的數據不同產生不一樣的結果)，其是執行的基礎設施。執行上下文包含的內容有很多，下面從類型、包含內容、生命周期、執行過程、結論來進行闡述。

10.1 類型

執行上下文主要分為三類：全局執行上下文、函數執行上下文、eval函數執行上下文。

全局執行上下文

當JavaScript執行全局代碼的時候，會編譯全局代碼并創建全局執行上下文，而且在整個頁面的生存周期內，全局執行上下文只有一份。

函數執行上下文

當調用一個函數的時候，函數體內的代碼會被編譯，并創建函數執行上下文，一般情況下，函數執行結束之后，創建的函數執行上下文會被銷毀。

eval執行上下文

當使用eval函數的時候，eval代碼也會被編譯，并創建執行上下文。

10.2 包含內容

執行上下文在不同的版本中定義不同，《重學前端》中對此進行了總結，目前主要有三個版本：

執行上下文在ES3中，包含三個部分。

• scope：作用域，也常常被叫做作用域鏈。

• variable object：變量對象，用于存儲變量的對象。

• this value：this值。

在ES5中，我們改進了命名方式，把執行上下文最初的三個部分改為下面這個樣子。

• lexical  environment：詞法環境，當獲取變量時使用。(通過let、const、with()、try-catch創建的變量存在詞法環境中)

• variable environment：變量環境，當聲明變量時使用。(通過var聲明或function(){}聲明的變量存在變量環境中)

• this value：this值。

在ES2018中，執行上下文又變成了這個樣子，this值被歸入lexical environment，但是增加了不少內容。

• lexical environment：詞法環境，當獲取變量或者this值時使用。

• variable environment：變量環境，當聲明變量時使用

• code evaluation state：用于恢復代碼執行位置。

• Function：執行的任務是函數時使用，表示正在被執行的函數。

• ScriptOrModule：執行的任務是腳本或者模塊時使用，表示正在被執行的代碼。

• Realm：使用的基礎庫和內置對象實例。

• Generator：僅生成器上下文有這個屬性，表示當前生成器。

10.3 執行上下文生命周期

在執行上下文生命周期部分(將按照ES3階段的內容進行介紹，因為自我感覺后續定義的名詞內容雖然更全面，但背起來確實不是很容易)，分為創建階段和執行階段兩個階段，每個階段負責不同的事情。(注：，每一部分都是一個問題，詳細解釋看后續百題斬。)

創建階段

創建階段主要負責生成變量對象、建立作用域鏈以及確定this指向。

代碼執行階段

創建完成之后，就會開始執行代碼，這個時候，會完成變量賦值，函數引用，以及執行其他代碼。

10.4 代碼執行過程

百題斬【008-009】介紹了代碼和函數的執行過程，但是這個介紹只是從宏觀方面進行介紹，并沒有進行詳細的介紹，下面將從調用棧這個角度詳細闡述一下代碼的執行過程。

1. 創建 全局上下文 (global EC)。將其壓入棧底;

2. 全局執行上下文 (caller) 逐行 自上而下 執行。遇到函數時，函數執行上下文 (callee) 被push到執行棧頂層;

3. 函數執行上下文被激活，成為 active EC, 開始執行函數中的代碼，caller 被掛起;

4. 函數執行完后，callee 被pop移除出執行棧，控制權交還全局上下文 (caller)，繼續執行;

下面將舉一個例子來闡述該執行過程。

var a = 1; function f1() {     // …… }  function f2() {     f1();     // …… }  f2();

上述代碼的調用棧如下所示：

1. 首先創建全局執行上下文，并將全局執行上下文壓入棧底;其中變量a、函數f1和f2都將被保存在全局執行上下文的變量環境中;

2. 全局執行上下文開始執行，變量a被賦值為1，當調用函數f2時，會創建對應的函數執行上下文并壓入調用棧，在函數f2的執行上下文被創建好后，將進入代碼執行階段;

3. 函數f2執行過程中會調用函數f1，創建對應的函數執行上下文并壓入調用棧;f1進行執行階段;

4. f1函數返回時，該函數的執行上下文從棧頂彈出;

5. 緊接著f2函數返回，f2函數對應的執行上下文也從棧頂彈出;

6. 至此代碼執行關閉，當完畢頁面的時候全局執行上下文銷毀。

10.5 結論

了解了執行上下文，需要記住一些結論性的東西

1. 在調用棧中只有棧頂的上下文處于執行中，其他上下文需要等待;

2. 全局上下文只有唯一的一個，它在瀏覽器關閉時出棧;

3. 函數的執行上下文的個數沒有限制;

4. 每次某個函數被調用，就會有個新的執行上下文為其創建，并把該執行上下文壓入調用棧，然后JavaScript引擎開支執行函數代碼，即使是調用的自身函數，也是如此;

5. 當前函數執行完畢后，JavaScript引擎會將該函數的執行上下文彈出棧;

6. 當分配的調用棧空間被占滿時，會引發“堆棧溢出”問題。

感謝各位的閱讀，以上就是“JavaScript中執行上下文的作用是什么”的內容了，經過本文的學習后，相信大家對JavaScript中執行上下文的作用是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！