[TOC] # 變量對象（Variable Object） 變量對象中存儲了在上下文（環境）中定義的變量和函數聲明。 <br> 變量對象的創建，依次經歷了以下幾個過程。 1. 建立 arguments 對象。函數的所有形參 (如果是函數上下文) * 由名稱和對應值組成的一個變量對象的屬性被創建 * 沒有實參，屬性值設為 undefined 2. 檢查當前上下文的函數聲明，也就是使用 function 關鍵字聲明的函數。 * 由名稱和對應值（函數對象(function-object)）組成一個變量對象的屬性被創建 * 如果變量對象已經存在相同名稱的屬性，則完全替換這個屬性 3. 檢查當前上下文中的變量聲明 * 由名稱和對應值（undefined）組成一個變量對象的屬性被創建； * 如果變量名稱跟已經聲明的形式參數或函數相同，則變量聲明不會干擾已經存在的這類屬性  在上面的規則中我們看出，function聲明會比var聲明優先級更高一點。 # 活動對象（Activation Object） 活動對象是在函數執行上下文里面的，其實也是變量對象，只是它需要在函數被調用時才被激活。 <br> # 例子 ## 例1 ~~~ function foo(a) { var b = 2; function c() {} var d = function() {}; b = 3; } foo(1); ~~~ 在進入執行上下文后，這時候的 AO 是： ~~~js AO = { arguments: { 0: 1, length: 1 }, a: 1, b: undefined, c: reference to function c(){}, d: undefined } ~~~ 代碼執行 在代碼執行階段，會順序執行代碼，根據代碼，修改變量對象的值 還是上面的例子，當代碼執行完后，這時候的 AO 是： ~~~js AO = { arguments: { 0: 1, length: 1 }, a: 1, b: 3, c: reference to function c(){}, d: reference to FunctionExpression "d" } ~~~ <br> ## 例2 ~~~ function test() { console.log(foo); console.log(bar); var foo = 'Hello'; console.log(foo); var bar = function () { return 'world'; } function foo() { return 'hello'; } } test(); // 創建階段 VO = { arguments: {...}, foo: <foo reference>, bar: undefined } // 這里有一個需要注意的地方，因為var聲明的變量當遇到同名的屬性時，會跳過而不會覆蓋 // 執行階段 VO -> AO VO = { arguments: {...}, foo: 'Hello', bar: <bar reference> } ~~~ <br> ## 例3 ~~~ console.log(a); console.log(b); console.log(c); console.log(d); var a = 100; b = 10; function c(){}; var d = function(){}; ~~~ **上述代碼的變量對象：** ~~~ //這里用VO表示變量對象 VO = { a = undefined; //有a，a使用var聲明，值會被賦值為undefined //沒有b，因為b沒用var聲明 c = function c (){} //有c，c是函數聲明，并且c指向該函數 d = undefined; //有d，d用var聲明，值會被賦值為undefined } ~~~ 執行上述代碼的時候，會創建一個全局執行上下文，上下文中包含上面變量對象，創建完執行上下文后，這個執行上下文才會被壓進執行棧中。開始執行后，因為js代碼一步一步被執行，后面賦值的代碼還沒被執行到，所以使用console.log函數打印各個變量的值是變量對象中的值。 在運行到第二行時會報錯（報錯后就不再執行了），因為沒有b（b is no defined）。把第二行注釋掉后，再執行各個結果就是VO里面的對應的值。 <br> # 全局上下文的變量對象 以瀏覽器中為例，全局對象為window。 全局上下文有一個特殊的地方，它的變量對象，就是window對象。而這個特殊，在this指向上也同樣適用，this也是指向window。 ~~~ // 以瀏覽器中為例，全局對象為window // 全局上下文 windowEC = { VO: window, scopeChain: {}, this: window } ~~~ 除此之外，全局上下文的生命周期，與程序的生命周期一致，只要程序運行不結束，比如關掉瀏覽器窗口，全局上下文就會一直存在。其他所有的上下文環境，都能直接訪問全局上下文的屬性。 <br> # 總結 到這里變量對象的創建過程就介紹完了，讓我們簡潔的總結我們上述所說： 1. 全局上下文的變量對象初始化是全局對象 2. 函數上下文的變量對象初始化只包括 Arguments 對象 3. 在進入執行上下文時會給變量對象添加形參、函數聲明、變量聲明等初始的屬性值 4. 在代碼執行階段，會再次修改變量對象的屬性值 未進入執行階段之前，變量對象中的屬性都不能訪問！但是進入執行階段之后，變量對象轉變為了活動對象，里面的屬性都能被訪問了，然后開始進行執行階段的操作。 <br> # 參考資料 * [JS變量對象詳解](https://www.cnblogs.com/lsgxeva/p/7976034.html) * [JavaScript深入之變量對象](https://github.com/mqyqingfeng/Blog/issues/5)