日常在群裡討論一些概念性的問題，比如變數提升，作用域和閉包相關問題的時候，經常會聽一些大佬們給別人解釋的時候說執行上下文，呼叫上下文巴拉巴拉，總有點似懂非懂，不明覺厲的感覺。今天，就對這兩個概念梳理一下，加深對js基礎核心的理解。

1. 執行上下文(execution context)與可執行程式碼（execution code）

1.1 首先說一下，可執行程式碼的型別有哪些：

• 全域性程式碼：例如載入外部的js檔案或者本地標籤內的程式碼。全域性程式碼不包括 function 體內的程式碼
• 函式程式碼：function體內的程式碼
• eval程式碼：eval()函式計算某個字串，並執行其中的js程式碼。比如eval("alert('hello world')")。雖然很強大，但實際用得很少，不討論。

當js引擎遇到這三種類型的程式碼的時候，都會進行一些準備工作，這些準備工作，專業的說法就叫執行上下文。或者說js引擎遇到這三種類型的程式碼的時候，就會進入到一個執行上下文。

簡而言之，執行上下文是評估和執行javascript程式碼的環境的抽象概念。每當javascript程式碼在執行的時候，它都是在執行上下文中執行。執行上下文可以理解為當前程式碼的執行環境，它會形成一個作用域（╭(╯^╰)╮，作用域就作用域嘛，說得這麼拗口，非要搞個什麼執行上下文的概念）。

1.2 那麼js引擎在遇到可執行程式碼的時候，它究竟會做哪些準備工作呢？

• 全域性執行上下文：建立一個全域性的window物件（瀏覽器的情況下），並且設定 this 的值等於這個全域性物件。一個程式中只會有一個全域性執行上下文。
• 函式執行上下文：每當一個函式被呼叫時，都會為該函式建立一個新的上下文。每個函式都有自己的執行上下文，不過是在函式被呼叫時建立的。函式上下文可以有任意多個。每當一個新的執行上下文被建立，它會按定義的順序執行一系列步驟。
• eval函式執行上下文：略

其實沒必要刻意去區分可執行程式碼與執行上下文。個人理解，當別人跟你聊一些概念性的東西，聊到可執行程式碼，可執行上下文，執行環境的時候，其實他們可能是想說作用域，只不過表述方式不同罷了。

2. 執行上下文棧（Execution context stack, ECS）

在一個javascript程式中，必定會產生多個執行上下文，javascript引擎會以棧的方式來處理它們，也就是執行上下文棧（很多文章可能會稱它為執行棧，執行上下文堆疊，函式呼叫棧，其實都是差不多的意思）。

關於棧的概念和特性在上一篇部落格：js基礎梳理-記憶體空間已有介紹。

為了模擬執行上下文棧的行為，可以把它定義為一個數組：

ECStack = [];

現在 javascript遇到下面這段程式碼了

let a = 'hello world';

function first () {
    console.log('進入 first 函式執行上下文');
    second();
    console.log('再次進入 first 函式執行上下文');
}

function second () {
    console.log('進入 second 函式執行上下文');
}

first();

console.log('進入 全域性執行上下文（Global Execution Context）')

當上述程式碼在瀏覽器載入時，Javascipt引擎建立了一個全域性執行上下文並把它壓入了執行上下文棧，用 globalContext表示它，並且只有當整個應用程式結束的時候（瀏覽器關閉），ECStack才會被清空，所以程式結束之前，ECStack最底部永遠有個 globalContext:

ECStack = [
    globalContext
];

當執行到一個函式的時候，就會建立一個執行上下文，並且壓入執行上下文棧，當函式執行完畢的時候，就會將函式的執行上下文從棧中彈出。知道了這樣的工作原理，就可以分析出 ECStack的變化過程：

// 虛擬碼

// first()
ECStack.push(<first> functionContext);

// first中呼叫了second,繼續建立second的執行上下文
ECStack.push(<second> functionContext);

// second執行完畢
ECStack.pop();

// first執行完畢
ECStack.pop();

// javascript接著執行下面的程式碼，但是ECStack底層永遠有個globalContext;

注意：函式中，遇到return能終止可執行程式碼的執行，因此會直接將當前上下文彈出棧。

例如，看以下這個閉包例子：

function f1(){
    var n=999;
    function f2(){
        alert(n);
    }
    return f2;
}
var result=f1();
result(); // 999

因為f1中的函式f2在f1的可執行程式碼中，並沒有被呼叫執行，因此執行f1時，f2不會建立新的上下文，而直到result執行時，才建立了一個新的。具體演變過程如下：

// 虛擬碼：
// 全域性上下文入棧：
ECStack = [
    globalContext
];

// f1 EC入棧：
ECStack.push(<f1> functionContext);
// f1 EC出棧：
ECStack.pop();
// result EC入棧：
ECStack.push(<result> functionContext);
// result EC出棧：
ECStack.pop();

3.執行上下文的生命週期

3.1 建立階段

• 生成變數物件（Variable object, VO）
• 建立作用域鏈（Scope chain）
• 確定this指向

3.2 執行階段

• 變數賦值
• 函式引用
• 執行其他程式碼

在接下來的文章中將梳理建立階段的這三個步驟。