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