>[success] # es3 1. 在ES3 規范中你會看到 **VO / AO / GO** 這幾個名詞，上個章節中講了關于三種執行上下文他們會各自產生屬于自己代碼環境上下文，這三個名詞是它們在當前上下文中，用來存儲聲明的變量的地方出 1.1. **GO（Global Object）全局對象（具體上個章節介紹了）**,瀏覽器把內置的一些屬性和方法放一個單獨的內存中，堆內存（Heap）,**window** 指向 **GO**對象,全局上下文中，基于**var/function**聲明的變量是直接存儲到GO對象上,也就是說**function 和 var**聲明的變量都是掛在到 '**window**' 上的 1.2. 變量對象**VO(Variable Object)**： 存放當前執行上下文中創建的變量和值，VO 就是變量對象,簡單地說就是**變量對象**就是用來儲存當前上下文創建的**創建的變量** 1.3. **活動對象AO(Activation Object)**， 函數私有上下文中的變量對象,在**函數執行上下文FEC中**，因為私有變量對象 AO是要保存**當前私有上下文中所有的變量**，而一個函數內的變量包括：**形參變量、局部變量、自身函數對象引用量、arguments、this**。 為了保存這些變量，所以特意創建了一個對象，稱它為**AO**，它在創建函數的過程中，函數內部的代碼不管對還是錯我都可以成功加載到頁面中，因為我們還沒有調用執行它，也就是我們聲明一個函數時，你又**沒有調用它**，那么它就失去了它的作用，相當于內部儲**存一堆字符串** 這樣也就可以更好理解下面這段代碼，執行結果報錯b is not defined 因為此時 b在函數AO中執行完畢即銷毀 ~~~ function a(){ var b = 12 } a() b ~~~ >[danger] ##### 形象圖解 1. 在`es3` 時候沒有 let 和 const ，但 var 和 function 聲明變量都掛在到window 上，因此全局上下文中Vo 即為 GO，函數中上下文變量位置為AO  >[danger] ##### 案例根據vo/go 分析 ~~~ console.log(a) ~~~ 上面代碼執行結果'**Uncaught ReferenceError: a is not defined**'首先會到VO查找，看是否為全局變量，如果不是，則再去**GO**中找，看是否為全局對象的一個屬性，如果還不是，則報錯`console.log(window.a)`; 直接去GO中查找是否存在a這個成員，如果沒有則不會報錯，值是**undefined** >[info] ## 參考 https://www.freecodecamp.org/news/execution-context-how-javascript-works-behind-the-scenes/ >[success] # es6 1. 新的ES規范開始增加了**Lexical Environment**概念，這個概念中規定每段代碼都有屬于自己的**Lexical Environment**，這個環境中規定了兩個重要點 1.1. **Environment record**（環境記錄） -- 記錄了在該 lexical environment 中被創建的標識符與變量的映射，簡單理解就是所在環境記錄類似VO/AO 即所在位置變量存儲環境 1.2.**Reference to outer lexical environment** -- 外部環境，就例如函數中使用了全局變量這個屬性來自外部值 2. **Environment record** 環境分為五大類 2.1. **Declarative Environment Records**：記錄`var`、`const`、`let`、`class`、`import`、`function`等聲明 2.2. **Object Environment Records**：與某一對象相綁定，其會記錄該對象中具有**string**標識符的屬性，非 string 標識符的屬性不會被記錄。Object environment records 為`with`語句所創建 2.3. **Global Environment Records**：類似于 declarative environment records 與 object environment records 的結合，在包含頂層聲明的同時還包含 global object 的屬性； 2.4. **Function Environment Records**：為 declarative environment records 的子類，用于函數的頂層，如果該函數非箭頭函數則提供`this`的綁定，如果該函數還引用了`super`則提供`super`方法的綁定； 2.5. **Module Environment Records**：為 declarative environment records 的子類，用于 ES module 的頂層，除去常量和變量的聲明，還包含不可變的 import 的綁定，該綁定提供了到另一 environment records 的間接訪問。 3. 詞法種類還分為三類`LexicalEnvironment`/`VariableEnvironment`/`PrivateEnvironment`, LexicalEnvironment 中記錄`let`、`const`等聲明，VariableEnvironment 則僅處理`VariableStatements`即`var`聲明,私有變量對應`PrivateEnvironment` * **圖解**  >[danger] ##### 構成結果 * 根據上面概念 一段代碼將會變成一個樹形結構 ~~~ // global environment let a = 1; const b = 2; function f(arg1) { let c = arg1; var d = 3; } f(a); ~~~ ~~~ GEC = { lexicalEnvironment: { environmentRecord: { type: "Global", declarativeRecord: { type: "Declarative", a: <uninitialized>, b: <uninitialized>, f: <function> }, objectRecord: { type: "Object", Infinity: +∞, isFinite: <function> } }, refToOuter: null } } ~~~ * 函數被調用時候結構 ~~~ FEC = { lexicalEnvironment: { environmentRecord: { type: "Function", Arguments: {0: 1, length: 1}, c: <uninitialized>, this: <Global Object> }, refToOuter: GEC // global execution context }, variableEnvironment: { environmentRecord: { type: "Function", d: undefined, this: <Global Object> }, refToOuter: GEC // global execution context } } ~~~ >[info] ## 參考 https://blog.csdn.net/qq_35368183/article/details/103888311 [# JavaScript execution context — from compiling to execution (part 1-4 推薦都讀)](https://cabulous.medium.com/javascript-execution-context-part-1-from-compiling-to-execution-84c11c0660f5) https://www.atatus.com/blog/javascript-execution-context/ https://blog.openreplay.com/explaining-javascript-s-execution-context-and-stack https://javascript.info/closure https://www.codingem.com/javascript-closures/ https://borderlessengineer.com/how-js-works-lexical-environment/ https://github.com/lizhongzhen11/lizz-blog/issues/49 https://2ality.com/2019/07/global-scope.html