js基礎梳理-究竟什麼是執行上下文棧（執行棧），執行上下文(可執行程式碼）？
日常在群裡討論一些概念性的問題，比如變數提升，作用域和閉包相關問題的時候，經常會聽一些大佬們給別人解釋的時候說執行上下文，呼叫上下文巴拉巴拉，總有點似懂非懂，不明覺厲的感覺。今天，就對這兩個概念梳理一下，加深對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 執行階段
- 變數賦值
- 函式引用
- 執行其他程式碼
在接下來的文章中將梳理建立階段的這三個步驟。