深入ECMAScript（二）：執行上下文
執行上下文（Exexution Contexts）：用來通過ECMAScript編譯器來追蹤程式碼執行時計算的一種規範策略。
可以將執行上下文理解為伴隨程式碼解析執行始終並記錄其狀態的一個抽象裝置。
ExecutionContext = {
VariableEnvironment: { ... },
LexicalEnvironment: { ... },
}
複製程式碼
執行上下文同時包含 變數環境元件（VariableEnvironment） 和 詞法環境元件（LexicalEnvironment） ，這兩個元件都屬於我們之前所說的 詞法環境（Lexical Environment） 。為什麼存在兩個環境元件，我們稍後將進行詳細討論
二、執行上下文棧
執行上下文棧（Execution Context Stack）：是一個後進先出的棧式結構（LIFO），用來跟蹤維護執行上下文。 執行執行上下文（running execution context） 始終是執行上下文棧的頂層元素。那麼什麼時候會建立新的執行上下文呢？
ECMAScript可執行程式碼有四種類型： 全域性程式碼，函式程式碼，模組程式碼和 eval 。每當從與當前執行執行上下文相關聯的可執行程式碼轉到與此執行上下文不相關的可執行程式碼時，會建立新的執行上下文，將其壓入執行上下文棧併成為正在執行的執行上下文。當相關程式碼執行完畢返回後，將正在執行的執行上下文從執行上下文棧刪除，之前的執行上下文又成為了正在執行的執行上下文。
我們通過一個動圖來看一下執行上下文棧的工作過程
- 開始執行任何JavaScript程式碼前，會建立全域性上下文並壓入棧，所以全域性上下文一直在棧底。
- 每次呼叫函式都會建立新的執行上下文（即便在函式內部呼叫自身），並壓入棧。
- 函式執行完畢返回，其執行上下文出棧。
- 所有程式碼執行完畢，執行上下文棧只剩全域性執行上下文。
三、執行上下文的建立、入棧及出棧
上面提到過ECMAScript可執行程式碼有四種類型： 全域性程式碼，函式程式碼，模組程式碼和 eval 。
首先要說明的是，這裡雖然說是 全域性程式碼 ，但是JavaScript引擎其實是按照 script 標籤來解析執行的，也就是說 script 標籤按照它們出現的順序解析執行，這也就是為什麼我們平時要將專案依賴js庫放在前面引入的原因。
JavaScript引擎是按可執行程式碼塊來執行程式碼的，在任意的JavaScript可執行程式碼被執行時，執行步驟可按如下理解：
- 建立一個 新的執行上下文
- 設定該執行上下文的 變數環境元件（VariableEnvironment） 和 詞法環境元件（LexicalEnvironment）
- 將該執行上下文 推入執行上下文棧 併成為 正在執行的執行上下文
- 對程式碼塊內的 識別符號進行例項化及初始化
- 執行程式碼
- 執行完畢後 執行上下文出棧
變數提升（Hoisting）及暫時性死區（temporal dead zone，TDZ）
我們平常所說的變數提升就發生在上述執行步驟的 第四步 ，對程式碼塊內的 識別符號進行例項化及初始化 的具體表現如下：
- 執行程式碼塊內的
let、const和class宣告的標識符合集記錄為lexNames - 執行程式碼塊內的
var和function宣告的標識符合集記錄為varNames - 如果
lexNames內的任何識別符號在varNames或lexNames內出現過，則報錯SyntaxError，這就是為什麼可以用var或function宣告多個同名變數，但是不能用let、const和class宣告多個同名變數。 - 將
varNames內的var宣告的識別符號例項化並初始化賦值undefined，如果有同名識別符號則跳過這就是所謂的 變數提升 ，我們用
var宣告的變數，在宣告位置之前訪問並不會報錯，而是返回undefined - 將
lexNames內的識別符號例項化，但並不會進行初始化，在執行至其宣告處程式碼時才會進行初始化，在初始化前訪問都會報錯。這就是我們所說的 暫時性死區 ，
let、const和class宣告的變數其實也提升了，只不過沒有被初始化，初始化之前不可訪問。 - 最後將
varNames內的函式宣告例項化並初始化賦值對應的函式體，如果有同名函式宣告，則前面的都會忽略，只有最後一個宣告的函式會被初始化賦值。函式宣告會被直接賦值，所有我們在函式宣告位置之前也可以呼叫函式。
四、為什麼需要兩個環境元件
首先明確這兩個環境元件的作用， 變數環境元件（VariableEnvironment） 用於記錄 var 宣告的繫結， 詞法環境元件（LexicalEnvironment） 用於記錄其他宣告的繫結（如 let 、 const 、 class 等）。
一般情況下一個 Exexution Contexts 內的 VariableEnvironment 和 LexicalEnvironment 指向同一個詞法環境，之所以要區分兩個元件，主要是為了實現塊級作用域的同時不影響 var 宣告及函式宣告。
眾所周知，ES6之前並沒有 塊級作用域 的概念，但是ES6及之後我們可以通過新增的 let 及 const 命令來實現塊級作用域，並且不影響 var 宣告的變數，那麼這是怎麼實現的呢？
- 首先在一個正在執行的執行上下文（
running Execution Context）內，詞法環境由VariableEnvironment和LexicalEnvironment構成，此執行上下文內的所有識別符號的繫結都記錄在兩個元件的環境記錄內。 - 當執行至塊級程式碼時，會將
LexicalEnvironment記錄下來，我們將其記錄為oldEnv。 - 然後建立一個新的
LexicalEnvironment（外部詞法環境outer指向oldEnv），我們將其記錄為newEnv，並將newEnv設定為running Execution Context的LexicalEnvironment。 - 然後塊級程式碼內的
let、const等宣告就會繫結在這個newEnv上面，但是var宣告和函式宣告還是繫結在原來的VariableEnvironment上面。塊級程式碼內的函式宣告會被當做
var宣告，會被提升至外部環境，塊級程式碼執行前其值為初始值undefinedconsole.log(foo) // 輸出：undefined { function foo() {console.log('hello')} } console.log(foo) // 輸出: ƒ foo() {console.log('hello')} 複製程式碼 - 塊級程式碼執行完畢後，又將
oldEnv還原為running Execution Context的LexicalEnvironment。
目前包括塊級程式碼（在一對大括號內的程式碼）、 for 迴圈語句、 switch 語句、 TryCatch 語句中的 catch 從句以及 with 語句（ with 語句建立的新環境為物件式環境，其他皆為宣告式環境）都是這樣來實現塊級作用域的。
關於執行上下文我們就說到這裡，下一篇我們學習領域（Realm）。
文章我是邊學邊寫的，有什麼錯誤或不當的地方，請務必給予指正。