JS入门难点解析5-变量对象

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）

（注2：更多内容请查看我的目录。）

1. 执行上下文(执行环境)

在前篇JS入门难点解析4-执行上下文栈中讲到，当 JavaScript 代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)，或者说是执行环境。

我们看下《JavaScript高级程序设计》中对执行上下文的解释：

执行环境（execution context， 为简单起见，有时也称环境）是JavaScript 中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象（variable object），环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象。但解析器在处理数据时会在后台使用它。

对于每个执行上下文，都有三个重要属性：

• 变量对象(Variable object，VO)
• 作用域链(Scope chain)
• this 我们将用三篇文章依次探讨这三个属性。首先来看一下变量对象。

2. 变量对象

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

不同执行上下文下的变量对象稍有不同，我们主要看一下全局上下文下的变量对象和函数上下文下的变量对象。

3.全局执行上下文

我们先来看一下《JavaScript高级程序设计》中对全局执行上下文的说明：

全局执行环境是最外围的一个执行环境。根据ECMAScript实现所在的宿主环境不同，表示执行环境的对象也不一样。在Web浏览器中，全局执行环境被认为是window对象，因此所有全局变量和函数都是作为window对象的属性和方法创建的。某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁（全局执行环境直到应用程序退出——例如关闭网页或浏览器——时才会被销毁）。

再来看W3CSchool中对全局对象的描述：

全局对象是预定义的对象，作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性，所以它没有名称。 在顶层 JavaScript 代码中，可以用关键字 this 引用全局对象。但通常不必用这种方式引用全局对象，因为全局对象是作用域链的头，这意味着所有非限定性的变量和函数名都会作为该对象的属性来查询。例如，当JavaScript 代码引用 parseInt() 函数时，它引用的是全局对象的 parseInt 属性。全局对象是作用域链的头，还意味着在顶层 JavaScript 代码中声明的所有变量都将成为全局对象的属性。 全局对象只是一个对象，而不是类。既没有构造函数，也无法实例化一个新的全局对象。 在 JavaScript 代码嵌入一个特殊环境中时，全局对象通常具有环境特定的属性。实际上，ECMAScript 标准没有规定全局对象的类型，JavaScript 的实现或嵌入的 JavaScript 都可以把任意类型的对象作为全局对象，只要该对象定义了这里列出的基本属性和函数。例如，在允许通过 LiveConnect 或相关的技术来脚本化 Java 的 JavaScript 实现中，全局对象被赋予了这里列出的 java 和 Package 属性以及 getClass() 方法。而在客户端 JavaScript 中，全局对象就是 Window 对象，表示允许 JavaScript 代码的 Web 浏览器窗口。

所以，全局上下文中的变量对象就是全局对象。在Web中，全局对象就是WIndow对象。其具有以下特性：

1. 可以通过 this 引用，在客户端 JavaScript 中，全局对象就是 Window 对象。

console.log(this);  // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

1. 全局对象是由 Object 构造函数实例化的一个对象。

console.log(this instanceof Object);   // true

1. 预定义了一堆函数和属性。

// 都能生效
console.log(Math.random());
console.log(this.Math.random());

1. 作为全局变量的宿主。

var a = 1;
console.log(this.a);  // 1

1. 客户端 JavaScript 中，全局对象有 window 属性指向自身。

var a = 1;
console.log(window.a);  // 1
this.window.b = 2;
console.log(this.b);  // 2

4. 函数执行上下文

我们先来看一下《JavaScript高级程序设计》中对函数执行上下文的说明：

每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。而在函数执行完之后，栈将其环境弹出。把控制权返回给之前的执行环境。ECMAScript中的程序执行流正是由这个方便的机制控制着。 当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain）。作用域链的用途，是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端，始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象（active object）作为变量对象。活动对象在最开始时只包含一个变量，即arguments对象（这个对象在全局环境中是不存在的）。作用域链中的下一个变量对象来自包含（外部）环境，而再下一个变量来自下一个包含环境。这样，一直延续到全局执行环境；全局环境的变量对象始终都是作用域链中的最后一个对象。

标识符解析是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始，然后逐级地向后回溯，直至找到标识符为止（如果找不到标识符，通常会导致错误发生）。

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

活动对象和变量对象其实是一个东西，只是变量对象是规范上的或者说是引擎实现上的，不可在 JavaScript 环境中访问，只有到当进入一个执行上下文中，这个执行上下文的变量对象才会被激活，所以才叫 activation object ，而只有被激活的变量对象，也就是活动对象上的各种属性才能被访问。

活动对象是在进入函数上下文时刻被创建的，它通过函数的 arguments 属性初始化。arguments 属性值是 Arguments 对象。

5. 执行过程

执行上下文的代码会分成两个阶段进行处理：分析和执行，我们也可以叫做：

1. 执行上下文准备阶段
2. 代码执行阶段

5.1 执行上下文准备阶段

当进入执行上下文时，这时候还没有执行代码，执行上下文会进行准备工作。

变量对象会包括：

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

举个例子：

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
}

5.2 代码执行阶段

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

还是上面的例子，当代码执行完后，这时候的 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. 在代码执行阶段，会再次修改变量对象的属性值。

6. 思考题

最后让我们看几个例子：

1. 第一题

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

foo(); // ???

function bar() {
    b = 1;
    console.log(b);
}
bar(); // ???

第一段会报错：Uncaught ReferenceError: a is not defined。

第二段会打印：1。

这是因为函数中的 "a" 并没有通过 var 关键字声明，所有不会被存放在 AO 中。

第一段执行 console 的时候， AO 的值是：

AO = {
    arguments: {
        length: 0
    }
}

没有 a 的值，然后就会到全局去找，全局也没有，所以会报错。

当第二段执行 console 的时候，全局对象已经被赋予了 b 属性，这时候就可以从全局找到 b 的值，所以会打印 1。

所以，需要注意的是，这里由于a不是用var去声明的，并没有进行变量提升。如果是变量提升，会打印：undefined。此处，a能成为全局变量是由于LHS，所以代码需要执行到a=1，其才能成为全局变量。（详见JS入门难点解析3-作用域）。

1. 第二题

console.log(foo);

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

会打印函数，而不是 undefined 。

这是因为在进入执行上下文时，首先会处理函数声明，其次会处理变量声明，如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性。这其实也就是变量提升与函数提升的本质所在

参考

JavaScript深入之变量对象

BOOK-《JavaScript高级程序设计（第3版）》