原文： JS學習系列 06 – 變量對象
變量對象就是執行上下文和作用域鏈中間的橋樑。
劇透一下，神祕的 this 就存在於執行上下文環境之中！
當然，之後我會單獨用幾節來徹底講明白 this 到底是什麼（其實 this 很簡單）。
接下來，我們進入正文。
1. 執行上下文包含什麼
一個執行上下文我們可以抽象的理解爲對象（object）。
每一個執行上下文都有一些屬性（又稱爲上下文狀態），它們用來追蹤關聯代碼的執行進度。
我用一個結構圖來說明：
Variable Object 就代表變量對象。
Scope Chain 代表作用域鏈。
thisValue 代表神祕的 this 。
作用域鏈和 this 留到後面再講，今天我們先來弄明白變量對象。
2. 變量對象
A variable object is a scope of data related with the execution context. It’s a special object associated with the context and which stores variables and function declarations are being defined within the context.
變量對象(variable object) 是與執行上下文相關的數據作用域(scope of data) 。它是與上下文關聯的特殊對象，用於存儲被定義在上下文中的 變量(variables) 和 函數聲明(function declarations) 。
變量對象（Variable Object -- 簡寫 VO）是一個抽象的概念，指代與執行上下文相關的特殊對象，它存儲着在上下文中聲明的：
- 變量（var）
- 函數聲明 （function declaration，簡寫 FD）
- 函數的形參（arguments）
我們假設變量對象爲一個普通 ECMAScript 對象：
VO = {};
就像前面講過的，VO 是執行上下文的一個屬性：
activeExecutionContext = {
VO: {
// 上下文數據 （vars, FD, arguments）
}
}
因爲變量對象是一個抽象的概念，所以並不能通過變量對象的名稱直接訪問，但是卻可以通過別的方法來間接訪問變量對象，例如在全局上下文環境的變量對象會有一個屬性 window (DOM 中) 可以引用變量對象自身，全局上下文環境的另一個屬性 this 也指向全局上下文環境的變量對象。
舉個例子：
var a = 2;
function foo (num) {
var b = 5;
}
(function exp () {
console.log(111);
})
foo(10);
這裏對應的變量對象是：
// 全局上下文環境的變量對象
VO(globalContext) = {
// 一些全局環境初始化時系統自動創建的屬性： Math、String、Date、parseInt等等
···
// 全局上下文的變量對象中有一個屬性可以訪問到自身，在瀏覽器中這個屬性是 window ，在 node 中這個屬性是 global
window: global
// 自己定義的屬性
a: 10,
foo: <reference to function>
};
// foo 函數上下文的變量對象
VO(foo functionContext) = {
num: 10,
b: 5
};
注意：函數表達式並不包括在變量對象中。
3. 不同執行上下文中的變量對象
執行上下文包括：全局上下文、函數上下文和 eval() 上下文。
全局上下文中的變量對象
這裏我們先來了解一下什麼是全局對象：
全局對象（global object）是指在進入任何執行上下文之前就已經創建了的對象。
這個對象只有一份，它的屬性在程序中的任何地方都可以訪問，全局對象的生命週期終止於程序退出的那一刻。
全局對象初始化時系統將創建並初始化一系列原始屬性，例如：Math、String、Date、parseInt、window等等，之後是我們在全局上下文中自己定義的全局變量。在 DOM 中，全局對象的 window 屬性可以引用全局對象自身，全局上下文環境的 this 屬性也可以引用全局對象。
// 全局執行上下文環境
EC(globalContext) = {
// 全局對象（全局上下文環境的變量對象）
global: {
Math: <...>,
String: <...>,
...
...
window: global // 引用全局對象自身
},
// this 屬性
this: global
// 作用域鏈
...
}
舉個例子：
var a = 10;
console.log(a); // 10
console.log(window.a); // 10
console.log(this.a); // 10
因此，在全局上下文環境中，變量對象用全局對象來表示。
函數上下文中的變量對象
在函數上下文中，變量對象用活動對象 AO（Active Object）來表示。
VO(functionContext) = AO
活動對象是在進入函數上下文時刻被創建的，它是通過函數的 arguments 屬性進行初始化。arguments 也是一個對象。
AO = {
arguments: {
...
}
}
arguments 是活動對象的一個屬性，它也是一個對象，包括以下屬性：
1. callee - 指向當前函數的引用
2. length - 真正傳遞的參數個數
3. properties-indexes - index 是字符串類型的整數，例如"1": "aa"，類似於數組類型，也可以通過arguments[1]來訪問，但是不能用數組的方法（push, pop等等）。另外，properties-indexes 的值和實際傳遞進來的參數之間是共享的，一個改變，另一個也隨之改變。
舉個例子：
function foo (x, y, z) {
// 聲明的函數參數數量
console.log(foo.length); // 3
// 實際傳遞進來的參數數量
console.log(arguments.length); // 2
// arguments 的 callee 屬性指向當前函數
console.log(arguments.callee === foo) // true
// 參數共享
console.log(x === arguments[0]); // true
console.log(x); // 10
arguments[0] = 20;
console.log(x); // 20
x = 30;
console.log(arguments[0]); // 30
// 但是注意，沒有傳遞進來的參數 z ，和第3個索引值是不共享的
z = 40;
console.log(arguments[2]); // undefined
arguments[2] = 50;
console.log(z); // 40
}
foo(10, 20);
4. 代碼是如何被處理的
在第1節中我們講過js 代碼的編譯過程，其中有一步叫作預編譯，是說在代碼執行前的幾微秒會首先對代碼進行編譯，形成詞法作用域，然後執行。
那麼執行上下文的代碼就就可以分成兩個階段來處理：
1. 進入執行上下文（預編譯）
2. 執行代碼
而變量對象的修改變化和這兩個階段是緊密相關的。
並且所有類型的執行上下文都會有這2個階段。
進入執行上下文
當引擎進入執行上下文時（代碼還未執行），VO 裏已經包含了一些屬性：
1. 函數的所有形參（如果是函數執行上下文）
由名稱和對應值組成的一個變量對象的屬性被創建，如果沒有傳遞對應的實參，那麼由名稱和 undefined 組成的一種變量對象的屬性也會被創建。
2.所有的函數聲明（Function Declaration - FD）
由名稱和對應值（函數對象 function object）組成的一個變量對象的屬性被創建，如果變量對象已經存在相同名稱函數的屬性，則完全替換這個屬性。
3.所有的變量聲明（Variable Declaration - var）
由名稱和對應值（在預編譯階段所有變量值都是 undefined）組成的一個變量對象的屬性被創建，如果變量名和已經聲明的形參或者函數相同，則變量名不會干擾已經存在的這類屬性，如果已經存在相同的變量名，則跳過當前聲明的變量名。
注意：變量碰到相同名稱的變量是忽略，函數碰到相同名稱的函數是覆蓋。
舉個例子：
function test(a, b, c) {
console.log(a); // 函數體a
console.log(b); // 20
function a() {
console.log(1);
}
var a = 100;
console.log(a); // 100
var b = 2;
console.log(b); // 2
}
test(10,20,30);
function foo (a, b) {
var c = 5;
function bar () {};
var d = function _d () {};
(function f () {});
}
foo(10);
當進入帶有實參10的 foo 函數上下文時（預編譯時，此時代碼還沒有執行），AO 結構如下：
AO(foo) = {
a: 10,
b: undefined,
c: undefined,
bar: <reference to FunctionDelcaration "bar">,
d: undefined
};
注意，函數表達式 f 並不包含在活動對象 AO 內。
也就是說，只有函數聲明會被包含在變量對象 VO 裏面，函數表達式並不會影響變量對象。
行內函數表達式 _d 則只能在該函數內部可以使用， 也不會包含在 VO 內。
這之後，就會進入第2個階段，代碼執行階段。
代碼執行
在這個階段，AO/VO 已經有了屬性（並不是所有的屬性都有值，大部分屬性的值還是系統默認的初始值 undefined）。
AO 在代碼執行階段被修改如下：
AO['c'] = 5;
AO['d'] = <reference to FunctionDelcaration "_d">
再次要提醒大家，因爲函數表達式 _d 已經保存到了聲明的變量 d 上面，所以變量 d 仍然存在於 VO/AO 中。我們可以通 d() 來執行函數。但是函數表達式 f 卻不存在於 VO/AO 中，也就是說，如果我們想嘗試調用 f 函數，不管在函數定義前還是定義後，都會出現一個錯誤"f is not defined"，未保存的函數表達式只有在它自己的定義或遞歸中才能被調用。
再來一個經典例子：
console.log(x); // function
var x = 10;
console.log(x); // 10
x = 20;
function x () {};
console.log(x); // 20
這裏爲什麼是這樣的結果呢？
上邊我們說過，在代碼執行之前的預編譯，會爲變量對象生成一些屬性，先是形參，再是函數聲明，最後是變量，並且變量並不會影響同名的函數聲明。
所以，在進入執行上下文時，AO/VO 結構如下：
AO = {
x: <reference to FunctionDeclaration "x">
// 在碰到變量聲明 x 時，因爲已經存在了函數聲明 x ，所以會忽略
}
緊接着，在代碼執行階段，AO/VO 被修改如下：
AO['x'] = 10;
AO['x'] = 20;
希望大家可以好好理解變量對象，對於理解我們後邊要講的作用域鏈有很大的幫助。
5. 變量
有一些文章說過：
不管是使用 var 關鍵字（在全局上下文）還是不使用 var 關鍵字（在任何地方），都可以聲明一個變量。
請記住，這是錯誤的觀念。
任何時候，變量都只能通過使用 var 關鍵字來聲明（ES6 之前）。
a = 10;
上面的賦值語句，僅僅是給全局對象創建了一個新屬性（在非嚴格模式，嚴格模式下會報錯），但注意，它不是變量。“不是變量”並不是說它不能被改變，而是指它不符合ECMAScript 規範中變量的概念。
讓我們通過一個例子來看一下兩者的區別：
console.log(a); // undefined
console.log(b); // 報錯，b is not defined
b = 10;
var a = 20;
只要我們很好的理解了：變量對象、預編譯階段和執行代碼階段，就可以迅速的給出答案。
預編譯（進入上下文）階段：
VO = {
a: undefined
}
我們可以看到，因爲 b 不是通過 var 聲明的，所以這個階段根本就沒有 b ，b 只有在代碼執行階段纔會出現。但是在這個例子中，還沒有執行到 b 那就已經報錯了。
我們稍微更改一下示例代碼：
console.log(a); // undefined
b = 10;
console.log(b); // 10 代碼執行階段被創建
console.log(window.b); // 10
console.log(this.b); // 10
var a = 20;
console.log(a); // 20 代碼執行階段被修改
關於變量，還有一個很重要的知識點。
變量不能用 delete 操作符來刪除。
a = 10;
console.log(window.a); // 10
console.log(delete a); // true
console.log(window.a); // undefined
var b = 20;
console.log(window.b); // 20
console.log(delete b); // false
console.log(window.b); // 20
注意：這個規則在 eval() 上下文中不起作用。
eval('var a = 10;');
console.log(window.a); // 10
console.log(delete a); // true
console.log(window.a); // undefined