深耕系列之变量对象

上一篇文章讲到深耕系列之执行上下文，提到在ES8中，执行上下文包含了许多内容，其中包含变量对象。

那么这篇文章会去深入理解变量对象，理解他的组成和生成过程。

变量对象介绍

简单来说，变量对象是执行上下文中存储的变量和函数声明，在声明变量或修改变量时都会用到变量对象。

那么变量对象都记录了哪些内容？

变量对象组成

不同执行上下文的变量对象有差异，我们主要讨论一下全局执行上下文和函数执行上下文中的变量对象。

全局对象

全局上下文的变量对象指的就是全局对象，在浏览器上，全局对象就是Window对象，有着许多的属性和方法，可通过this去访问，如下：

活动对象

函数上下文的变量对象指的就是活动对象(activation object, AO)，为什么要叫活动对象呢？这是由于在函数内，活动对象是不可在js环境上访问的，这点是和全局对象不一样的。只有进入到一个函数执行上下文中，该活动对象才会被激活。所以我们称呼函数上下文中的变量对象为活动对象。

那么活动对象的组成如下：

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

举个例子:

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

  b = 3;

}

foo(1);

在进入执行上下文后，这时候的活动对象是：

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

当代码执行完全后，这时候的活动对象是：

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);
    a = 1;
}

foo();

执行会报错，因为在执行console.log(a);时，函数执行上下文中的活动对象并没有记录到a变量，因为a = 1是赋值，并不是声明。

函数声明优先变量声明

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

foo();

在执行console.log(a);时，打印出来的是函数a，这是因为进行该函数上下文时，活动对象是：

AO = {
    arguments: {
        length: 0
    },
    a: reference to function a(){},
}

总结

以上就是我对js变量对象的理解，后续文章会再总结作用域链和this等内容。如果觉得对你有帮助，请帮忙点个赞+评论+收藏，关注不失联。