深入js——变量对象

前言

文章深入js——执行上下文栈主要讲了代码执行过程中，执行上下文栈的变化，从文本开始，主要研究下执行上下文内部。与执行上下文相关的3个概念：

变量对象(Variable object，VO)
作用域链(Scope chain)
this 本文首先研究下变量对象。

变量对象VO

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

变量 (var, 变量声明);
函数声明 (FunctionDeclaration, 缩写为FD);
函数的形参(仅在函数执行上下文中存在) 全局上下文和函数上下文中的变量对象有些不同，因此以下分开讨论。

浏览器控制台查看VO

在讨论前，我们先看下在浏览器控制台如何查看VO，以帮助我们更好的理解后续内容。

之前在文章深入js——执行上下文栈中提到通过Call Stack查看执行上下文栈，变量对象也可以在控制台中看到。

图中红框的部分确切来说是用来看作用域链的，但这块还没讲到，我们可以暂且这样做：需要观察哪个执行上下文的变量对象，就debugger到对应的可执行代码块中，然后观察Local内变量的状态。

全局上下文中的变量对象

全局对象

全局对象Global是JavaScript最特别的一个对象，是在进入任何执行上下文之前就已经创建了的对象。全局对象在初始阶段就将Math、String、Date、parseInt等属性作为自身属性初始化，同样在全局作用域创建的所有变量或方法，也就是我们通常称为的全局对象或全局方法，也都是全局对象的属性。

区别全局对象和window window只是Global在浏览器环境下的一种体现，也就是在浏览器中Global === window，但不能混淆这2个概念。比如在Node.js中，Global仍然存在，但不等于window了。

全局上下文中的VO

通过以上对全局上下文的解释，我们可以知道，全局上下文中的变量对象就是Global。即

VO(globalContext) === global;

也就是在全局上下文中的变量，都可以通过Global的属性来访问。

debugger
var x = 1;
function bar (b) {
    debugger
    var a = 1;
    console.log(arguments)
    function foo () {
        console.log(a)
    }
    foo()
}
bar(1)

运行上述代码，打开控制台。在第一个debugger处，可以看到右侧是Global，展开会发现里面包含了很多Global自带的属性（Math、String等），同时也包含了我们声明的x变量和bar函数。因此，说了这么多，就是一句话：全局上下文中的VO就是全局对象！

函数上下文的VO

在函数上下文中，将活动对象（activation object, AO）作为变量对象。活动对象是在进入函数上下文时刻被创建的，它通过函数的arguments属性初始化。注释掉bar中的其他变量声明

可以看到，进入bar时，arguments就已经初始化了。

整体流程

除了形参和arguments的差异，全局上下文和函数上下文的变量对象的变化过程都是一样的，因此下面统一讨论。

进入执行上下文

在进入执行上下文时，变量对象VO已经包含了如下属性

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

还是上面那段代码，在第二个debugger处查看函数的变量对象

说明：除了形参和arguments，其他变量在全局环境中观察也是一样的，只是Global中太多自身属性，要找到我们定义的变量比较麻烦，因此就在函数中观察，但结果可扩展到全局上下文中。

可以看到，包含了arguments、函数foo、形参b、变量a

这里要特别说明2个问题：

1.函数声明会覆盖同名的变量声明，后面的函数声明会覆盖同名的前面的函数声明

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

打开控制台，可以看到进入执行上下文时，即使var foo = 1在函数声明后面，最终foo也是函数而不是变量，且console会打印出2（后面的函数声明覆盖了前面的）。

2.变量只能通过使用var关键字才能声明

变量声明要通过var，即var b = 10是声明了变量foo，但b = 10没有。

console.log(a); // undefined
console.log(b); // 报错，"b" 没有声明
b = 10;
var a = 20;

console.log(b)会报错，因为在进入b还没有声明，查看右侧Global中也会发现，在进入执行上下文时，只有a，没有b

var b = 10可以分解为2个步骤：变量声明和变量赋值，但b = 10只是一个单纯的赋值操作（这里是Global.b = 10）。而变量声明是在进入执行上下文发生，而赋值操作是在执行赋值代码时发生，因此在赋值操作前是访问不到b的。

代码执行

在代码执行阶段，就会按顺序执行代码，根据代码修改变量的值。沿用上面的一个例子，修改下

function bar () {
    debugger
    var foo = 1;
    foo();
    function foo () {
    	console.log(1)
    }
    function foo () {
    	console.log(2)
    }
}
bar()

打开控制台，会发现，在debugger处（进入执行上下文），foo是函数，且没有报错；但继续顺序执行代码会报错，因为执行到var foo = 1，此时foo已经被赋值为1，不为函数，故执行foo()时会报错。通过以上例子，能比较好的分清楚进入执行上下文阶段和代码执行阶段的区别。