深入理解变量对象

[18888628835]

变量对象

当JS执行到一段可执行代码时（全局代码、函数代码、eval）就会创建执行上下文，执行上下文内有三个重要属性：

• 变量对象
• this
• 作用域链
  变量对象是与执行上下文相关的数据作用域，它的作用是保存上下文中定义的变量声明与函数声明。

不同执行上下文中的变量对象是不同的，下面介绍一下全局变量对象和函数变量对象。

全局对象

MDN的解释：

一个全局对象是一个永远存在于 global scope 的 object。window 对象是浏览器中的全局对象。

任何全局变量或者全局函数都可以通过 window 的属性来访问。

在顶层 JavaScript 代码中，可以用关键字 this 引用全局对象。

举例

console.log(this) //window
var a=1 //挂到window上的属性
window.a //1

在顶层作用域（全局上下文）上的变量对象就是全局对象

活动对象

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

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

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

执行过程

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

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

进入执行上下文

当进入执行上下文阶段，这时候还没有执行代码
变量对象包括
1、函数的所有形参（如果是函数上下文）

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

2、函数声明

• 由名称和对应值组成的一个变量对象的属性被创建
• 如果变量对象存在相同名称的属性，则覆盖其属性

3、变量声明

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

举个例子

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

  b = 3;

}
foo(1)

在调用函数foo并进入函数执行上下文后，这时候的 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"
}

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

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

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

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

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

思考

第一题

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

foo(); // ???

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

第一个foo函数会报错：Uncaught ReferenceError: a is not defined

第二个bar函数会打印：1

原因是第一个函数进入执行上下文后，没有var声明，此时它的上下文是这样的

AO = {
    arguments: {
        length: 0
    },
}

当函数执行时，找不到a声明，所以就会报错

第二个函数进入执行上下文时，依然没有a的声明，但是函数里的代码执行时，能够从全局作用域里找到a，所以就打出1

第二题

console.log(foo);//???

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

var foo = 1;
console.log(foo);//???

第一个log会打印出函数体，而不是undefined，可见var声明提升被函数声明提升取代了
第二个log会打印出1

原因是会优先处理函数声明，再处理变量声明。如果变量名称跟已经声明的形参或函数相同，则变量声明不会干扰已经存在的这类属性，我们结合过程来分析：

在进入执行上下文时，此时变量对象是这样的

{
foo:undefined
}

代码执行时是这样的，优先处理函数声明,此时变量对象变成：

{
foo:reference to function foo(){}
}

当执行到第二个log时，foo又被另外赋值了，此时变量对象变成：

{
foo:1
}

第三题

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

打印的结果为：1
我们来分析一下其执行过程，在进入上下文时，变量对象变成

{
foo:undefined
}

在执行代码时，变量对象先变成函数再变成1

{
foo:reference to function foo(){}
}
//  foo=1
{
foo:1
}
console.log(foo) // 所以结果就是1