深入理解JavaScript变量对象

在上一篇《深入理解JavaScript执行上下文栈》，我们已经介绍了执行上下文相关概念：

执行上下文

分类：全局上下文、函数上下文

全局上下文：执行全局代码时，创建全局上下文。
函数上下文：执行函数时，创建函数上下文。

主要属性：

• 变量对象（Variable object，VO）
• 作用域链（Scope chain）
• this

这一章节我们主要针对执行上下文中的变量对象进行讲解

变量对象

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

在函数上下文中，我们用活动对象(activation object, AO)来表示变量对象。

我们在《深入理解JavaScript声明提升》中已经提到,在程序运行时会存在变量声明提升与函数声明提升，其实变量与函数声明便是提升至变量对象中。

创建过程

执行上下文分为两个阶段进行：解析与执行。

解析执行上下文

当解析执行上下文时，这时候还没有执行代码。

变量对象就是在这个时候创建的，如果执行上下文是全局上下文则变量对象初始化是全局对象。如果执行上下文是函数上下文，则变量对象通过函数的 arguments 属性初始化。arguments 属性值是 Arguments 对象。

此时变量对象包括：

1、 函数的所有形参 (如果是函数上下文)

• 由名称与对应值组成的一个变量对象的属性被创建
• 没有传入实参，则值为undefined

2、 函数声明

• 由名称和函数体组成一个变量对象的属性被创建
• 如果变量对象已经存在相同名称的属性，则完全替换这个属性

3、 变量声明

• 由名称和对应值（undefined）组成一个变量对象的属性被创建
• 如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性

举个例子：

function fn(a) {
    var b = 2
    function c() {}
    var d = function() {}
    b = 3
}
fn(1)

在解析完执行上下文之后， AO为：

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

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

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

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

我们来简单总结一下变量对象的创建过程：

1. 全局上下文的变量对象初始化是全局对象
2. 函数上下文的变量对象初始化只包括 Arguments 对象
3. 在解析执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值
4. 在代码执行阶段，会再次修改变量对象的属性值