彻底理解Javascript中的变量对象

1 定义

如果变量与执行上下文相关，那变量自己应该知道它的数据存储在哪里，并且知道如何访问。这种机制称为变量对象(variable object)。
变量对象(缩写为VO)是一个与执行上下文相关的特殊对象，它存储着在上下文中声明的以下内容：

• 变量 (var, 变量声明);
• 函数声明 (FunctionDeclaration, 缩写为FD);
• 函数的形参

举例来说，我们可以用普通的ECMAScript对象来表示一个变量对象：

VO = {};

就像我们所说的, VO就是执行上下文的属性(property)：

activeExecutionContext = {
     VO: {
       // 上下文数据（var, FD, function arguments)
      }
};

2 全局上下文中的变量对象

全局上下文中的变量对象就是全局对象，所以我们声明的变量都是全局对象的属性。

3 函数上下文中的变量对象

函数上下文中的变量对象由活动对象(AO)扮演。

活动对象的变化与处理上下文的两个阶段密切相关。进入执行上下文和执行代码。

3.1 进入执行上下文

当进入执行上下文(代码执行之前)时，VO里已经包含了下列属性：

1. 函数的所有形参(如果我们是在函数执行上下文中)
   由名称和对应值组成的一个变量对象的属性被创建；没有传递对应参数的话，那么由名称和undefined值组成的一种变量对象的属性也将被创建。
2. 所有函数声明(FunctionDeclaration, FD)
由名称和对应值（函数对象(function-object)）组成一个变量对象的属性被创建；如果变量对象已经存在相同名称的属性，则完全替换这个属性。
3. 所有变量声明(var, VariableDeclaration)
   由名称和对应值（undefined）组成一个变量对象的属性被创建；如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性。

也就是变量提升和var x = undefined 不会影响形参x的值，之后调用x指向的还是形参。

注意：进入执行上下文时，函数声明和变量声明都提前，但是变量声明的值还都是undefined，而函数声明的变量已经可以指向函数。变量声明的优先级最低。

总结，优先级，函数声明 > 函数形参 > 变量声明

让我们看一个例子：

function test(a, b) {
  var c = 10;
  function d() {}
  var e = function _e() {};
  (function x() {});
}
  
test(10); // call

当进入带有参数10的test函数上下文时，AO表现为如下：

AO(test) = {
  a: 10,
  b: undefined,
  c: undefined,
  d: <reference to FunctionDeclaration "d">
  e: undefined
};

注意，AO里并不包含函数“x”。这是因为“x” 是一个函数表达式(FunctionExpression, 缩写为 FE) 而不是函数声明，函数表达式不会影响VO。 不管怎样，函数“_e” 同样也是函数表达式，但是就像我们下面将看到的那样，因为它分配给了变量 “e”，所以它可以通过名称“e”来访问。

3.2 代码执行

进入上下文阶段，AO/VO已经拥有了属性(不过，并不是所有的属性都有值，大部分属性的值还是系统默认的初始值undefined )。
还是前面那个例子, AO/VO在代码执行期间被修改如下：

AO['c'] = 10;
AO['e'] = <reference to FunctionExpression "_e">;

另一个经典例子：

alert(x); // function
  
var x = 10;
alert(x); // 10
  
x = 20;
  
function x() {};
  
alert(x); // 20

为什么第一个alert “x” 的返回值是function，而且它还是在“x” 声明之前访问的“x” 的？为什么不是10或20呢？因为，根据规范函数声明是在当进入上下文时填入的； 同意周期，在进入上下文的时候还有一个变量声明“x”，那么正如我们在上一个阶段所说，变量声明在顺序上跟在函数声明和形式参数声明之后，而且在这个进入上下文阶段，变量声明不会干扰VO中已经存在的同名函数声明或形式参数声明，因此，在进入上下文时，VO的结构如下：

VO = {};
  
VO['x'] = <reference to FunctionDeclaration "x">
  
// 找到var x = 10;
// 如果function "x"没有已经声明的话
// 这时候"x"的值应该是undefined
// 但是这个case里变量声明没有影响同名的function的值
  
VO['x'] = <the value is not disturbed, still function>
//紧接着，在执行代码阶段，VO做如下修改：
VO['x'] = 10;
VO['x'] = 20;

我们可以在第二、三个alert看到这个效果。
在下面的例子里我们可以再次看到，变量是在进入上下文阶段放入VO中的。(因为，虽然else部分代码永远不会执行，但是不管怎样，变量“b”仍然存在于VO中。)

if (true) {
 var a = 1;
} else {
 var b = 2;
}
  
alert(a); // 1
alert(b); // undefined,不是b没有声明，而是b的值是undefined

本文绝大部分内容来自： http://dmitrysoshnikov.com/ecmascript/chapter-2-variable-object/
仅做少许修改

如果觉得有收获请关注微信公众号 前端良文 每周都会分享前端开发中的干货知识点。