JavaScript执行上下文之变量对象

JavaScript中每一个函数在运行期间都会创建一个执行上下文（execution context），执行上下文对象中存储了以下属性：

• 变量对象（Variable Object）
• 作用域链（Scope Chain）
• this

变量对象

变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。

只有在全局上下文中（即window），能够通过VO属性来访问变量对象。而在函数上下文中，VO是不能直接访问的，此时由激活对象(Activation Object,缩写为AO)扮演VO的角色。AO对象是在进入函数上下文时刻被创建的，它通过函数的arguments属性初始化。

AO对象的生命周期与执行上下文息息相关。首先执行上下文的代码会分成两个阶段进行处理：分析和执行，我们也可以叫做：

• 进入执行上下文（创建AO对象）
• 执行代码（更新AO对象）

创建AO对象

当进入执行上下文时，这时候还没有执行代码，会首先创建一个AO对象，该对象包含以下属性：

• 函数的所有形参 (如果是函数上下文)
  • 由名称和对应值组成的一个变量对象的属性被创建
  • 没有实参，属性值设为 undefined
• 函数声明
  • 由名称和对应值（函数对象(function-object)）组成一个变量对象的属性被创建
  • 如果变量对象已经存在相同名称的属性，则完全替换这个属性
• 变量声明
  • 由名称和对应值（undefined）组成一个变量对象的属性被创建
  • 如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性

下面是一段函数调用：

function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};

  b = 3;

}

foo(1);

上面这个例子在进入函数上下文时（代码执行之前），创建的AO对象如下：

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: undefined,
    c: reference to function c(){},
    d: undefined
}

更新AO对象

在代码执行阶段，会顺序执行代码，根据代码，修改变量对象的值。

还是上面的例子，当代码执行完后，这时候的 AO 是：

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
}

几个例子

首先看下面这个例子：

function foo(){
    console.log(a);
    var a = 1;
}
    
foo();

输出为undefined。

然后是这个例子：

function foo(){
    console.log(a);
    a = 1;
}
    
foo();

此时输出为 Uncaught ReferenceError: a is not defined。

这两个例子说明，函数上下文初始化AO对象时，只会将局部变量（使用var关键字声明的变量）添加到AO对象中。

总结

以下是解释器执行一段代码的伪逻辑：

1. 查找调用函数的代码。
2. 执行函数代码之前，先创建函数执行上下文。
3. 创建函数的执行上下文又分为3步：
   • 创建AO对象
   • 创建作用域链
   • 计算this值
4. 代码执行
   • 在当前上下文上运行函数代码，并随着代码一行行执行指派变量的值。

参考文章

• https://github.com/mqyqingfeng/Blog/issues/5
• http://yanhaijing.com/javascript/2014/04/29/what-is-the-execution-context-in-javascript/