前端百題斬【010】——通俗易懂的JavaScript執行上下文

寫該系列文章的初衷是「讓每位前端工程師掌握高頻知識點，爲工做助力」。這是前端百題斬的第10斬，但願朋友們關注公衆號「執鳶者」，用知識武裝本身的頭腦。

JavaScript標準吧一段代碼（包括函數）執行所需的全部信息定義爲「執行上下文」（可理解爲當前代碼的執行環境，同一個函數在不一樣的環境中執行，會因訪問的數據不一樣產生不同的結果），其是執行的基礎設施。執行上下文包含的內容有不少，下面從類型、包含內容、生命週期、執行過程、結論來進行闡述。

10.1 類型

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

1. 全局執行上下文

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

2. 函數執行上下文

當調用一個函數的時候，函數體內的代碼會被編譯，並建立函數執行上下文，通常狀況下，函數執行結束以後，建立的函數執行上下文會被銷燬。

3. eval執行上下文

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

10.2 包含內容

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

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

• scope：做用域，也經常被叫作做用域鏈。
• variable object：變量對象，用於存儲變量的對象。
• this value：this值。

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

• lexical environment：詞法環境，當獲取變量時使用。（經過let、const、with（）、try-catch建立的變量存在詞法環境中）
• variable environment：變量環境，當聲明變量時使用。（經過var聲明或function（）{}聲明的變量存在變量環境中）
• this value：this值。

3. 在ES2018中，執行上下文又變成了這個樣子，this值被納入lexical environment，可是增長了很多內容。

• lexical environment：詞法環境，當獲取變量或者this值時使用。
• variable environment：變量環境，當聲明變量時使用
• code evaluation state：用於恢復代碼執行位置。
• Function：執行的任務是函數時使用，表示正在被執行的函數。
• ScriptOrModule：執行的任務是腳本或者模塊時使用，表示正在被執行的代碼。
• Realm：使用的基礎庫和內置對象實例。
• Generator：僅生成器上下文有這個屬性，表示當前生成器。

10.3 執行上下文生命週期

在執行上下文生命週期部分（將按照ES3階段的內容進行介紹，由於自我感受後續定義的名詞內容雖然更全面，但背起來確實不是很容易），分爲建立階段和執行階段兩個階段，每一個階段負責不一樣的事情。（注：，每一部分都是一個問題，詳細解釋看後續百題斬。）

1. 建立階段

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

2. 代碼執行階段

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

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. 當分配的調用棧空間被佔滿時，會引起「堆棧溢出」問題。

看一看

1.若是以爲這篇文章還不錯，來個分享、點贊吧，讓更多的人也看到

2.關注公衆號執鳶者，與號主一塊兒斬殺前端百題。