JavaScript深刻之变量对象

JavaScript深刻系列第四篇，具体讲解执行上下文中的变量对象与活动对象。全局上下文下的变量对象是什么？函数上下文下的活动对象是如何分析和执行的？还有两个思考题帮你加深印象，快来看看吧！

前言

在上篇《JavaScript深刻之执行上下文栈》中讲到，当 JavaScript 代码执行一段可执行代码(executable code)时，会建立对应的执行上下文(execution context)。

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

• 变量对象(Variable object，VO)
• 做用域链(Scope chain)
• this

今天重点讲讲建立变量对象的过程。

变量对象

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

由于不一样执行上下文下的变量对象稍有不一样，因此咱们来聊聊全局上下文下的变量对象和函数上下文下的变量对象。

全局上下文

咱们先了解一个概念，叫全局对象。在 W3C school 中也有介绍：

全局对象是预约义的对象，做为 JavaScript 的全局函数和全局属性的占位符。经过使用全局对象，能够访问全部其余全部预约义的对象、函数和属性。

在顶层 JavaScript 代码中，能够用关键字 this 引用全局对象。由于全局对象是做用域链的头，这意味着全部非限定性的变量和函数名都会做为该对象的属性来查询。

例如，当JavaScript 代码引用 parseInt() 函数时，它引用的是全局对象的 parseInt 属性。全局对象是做用域链的头，还意味着在顶层 JavaScript 代码中声明的全部变量都将成为全局对象的属性。

若是看的不是很懂的话，容我再来介绍下全局对象:

1.能够经过 this 引用，在客户端 JavaScript 中，全局对象就是 Window 对象。

console.log(this);复制代码

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

console.log(this instanceof Object);复制代码

3.预约义了一堆，嗯，一大堆函数和属性。

// 都能生效
console.log(Math.random());
console.log(this.Math.random());复制代码

4.做为全局变量的宿主。

var a = 1;
console.log(this.a);复制代码

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

var a = 1;
console.log(window.a);

this.window.b = 2;
console.log(this.b);复制代码

花了一个大篇幅介绍全局对象，其实就想说：

全局上下文中的变量对象就是全局对象呐！

函数上下文

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

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

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

执行过程

执行上下文的代码会分红两个阶段进行处理：分析和执行，咱们也能够叫作：

1. 进入执行上下文
2. 代码执行

进入执行上下文

当进入执行上下文时，这时候尚未执行代码，

变量对象会包括：

1. 函数的全部形参 (若是是函数上下文)

   • 由名称和对应值组成的一个变量对象的属性被建立
   • 没有实参，属性值设为 undefined

2. 函数声明

   • 由名称和对应值（函数对象(function-object)）组成一个变量对象的属性被建立
   • 若是变量对象已经存在相同名称的属性，则彻底替换这个属性

3. 变量声明

   • 由名称和对应值（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 = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
}复制代码

到这里变量对象的建立过程就介绍完了，让咱们简洁的总结咱们上述所说：

1. 全局上下文的变量对象初始化是全局对象

2. 函数上下文的变量对象初始化只包括 Arguments 对象

3. 在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值

4. 在代码执行阶段，会再次修改变量对象的属性值

思考题

最后让咱们看几个例子：

1.第一题

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

foo(); // ???

function bar() {
    a = 1;
    console.log(a);
}
bar(); // ???复制代码

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

第二段会打印：1。

这是由于函数中的 "a" 并无经过 var 关键字声明，全部不会被存放在 AO 中。

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

AO = {
    arguments: {
        length: 0
    }
}复制代码

没有 a 的值，而后就会到全局去找，全局也没有，因此会报错。

当第二段执行 console 的时候，全局对象已经被赋予了 a 属性，这时候就能够从全局找到 a 的值，因此会打印 1。

2.第二题

console.log(foo);

function foo(){
    console.log("foo");
}

var foo = 1;复制代码

会打印函数，而不是 undefined 。

这是由于在进入执行上下文时，首先会处理函数声明，其次会处理变量声明，若是若是变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性。

下一篇文章

《JavaScript深刻之做用域链》

本文相关连接

《JavaScript深刻之执行上下文栈》

深刻系列

JavaScript深刻系列目录地址：github.com/mqyqingfeng…。

JavaScript深刻系列预计写十五篇左右，旨在帮你们捋顺JavaScript底层知识，重点讲解如原型、做用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念。

若是有错误或者不严谨的地方，请务必给予指正，十分感谢。若是喜欢或者有所启发，欢迎star，对做者也是一种鼓励。