深入javascript之变量对象（五）

1：前言

在上篇《深入javascript之执行上下文栈》说道，在JS代码执行一段可执行代码时，会创建对应的执行上下文，而多个执行上下文会组合成执行上下文栈。
对于每个执行上下文，都有三个重要的属性：

• 变量对象
• 作用域链
• this
  以下是创建变量对象的过程。

2： 变量对象

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

因为不同执行上下文的变量对象稍有不同，所以我们来聊聊全局上下文的变量对象和函数上下文的变量对象

3：全局上下文

我们先了解一下全局对象的概念，W3School中时这样介绍的：

1.全局对象是预定义的对象，作为JS的全局函数和全局属性的占位符，通过使用全局对象，可以访问所有其他预定义的对象、函数和属性。
2.在顶层JS代码中，函数体内可以通过this来引用全局对象，因为全局对象是作用域的头，这意味着所有非限定性变量和函数名都会作为该对象的属性来查询。
3.例如：当JS代码引用parseInt()函数时，它引用的是全局对象的parseInt属性。全局对象是作用域链的头，还意味着在顶层JS代码中声明的所有变量都会成为全局对象的属性。
’

自己的理解

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

console.log(this)

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

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

3.预定义一大堆函数和属性都能生效

console.log(Math.random());
console.log(this.Math.random());

4.作为全局变量的宿主

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

5.客户端的JS中，全局对象window属性指向自身

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

总而言之，全局上下文的变量对象就是全局对象！

4：函数上下文

1.在函数上下文中，我们用活动对象（actuvation object,AO）来表示变量对象
2.活动对象和变量对象其实是一个东西，只是变量对象是规范上或者说是引擎实现上的，不可在JS环境中访问，只有当进入一个执行上下文中，这个执行上下文的变量对象才会被激活，所以才叫actuvation object呐，而只有被激活的变量对象，其上的各种属性才能被访问。
3.活动对象是进入函数上下文时被创建的，它通过函数的arguements属性初始化，arguements属性值就是Arguements对象。

4.1：执行过程

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

4.1.1进入执行上下文

该阶段是执行前的编译阶段，在《作用域是什么》中详细讲过了。当进入执行上下文时，这时候还没有执行代码，
变量对象会包括：
1.函数的所有形参（如果是函数上下文）

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

2.函数声明

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

举个例子：

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

}
foo(1)

第一步：进入执行上下文后，这时的AO（变量对象）是：第一阶段：激活成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. 函数上下文的变量对象初始化只包括Arguements对象
3. 在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值
4. 在代码执行阶段，会再次修改变量对象的属性值

扩展：

arguements是什么？

arguments是一个类似数组的伪数组，在创建函数上下文时，会初始化活动对象，以数组的形式存储和保存函数传入的参数，然后在代码执行的时候再修改赋予其原本该有的值

arguements有什么用呢？

有了这个对象我们以后写函数的时候，就不用给所有的形参指定参数名，然后通过参数名的方式获取参数了，我们可以直接使用arguments对象来获取实参。

当我们在用函数传递参数的时候，js引擎就会把这个函数的全部参数存储在一个叫做arguements的东西里面。

length指的就是函数参数的个数。

arguements的用途(重点)

arguements只是伪数组，并不是真正的数组，可以用slice()
方法将一个伪数组转化成一个新的数组对象（用start和end来提取数组的开头和结尾，不定义的话返回的就是整个数组），这样的话，一个arguements对象就可以变成真正的数组，就可以用Arr原本该有的属性函数。（不然只能用lenth遍历）

思考题

//第一段代码
function foo() {
    // var a = 1
    console.log(a);
    a = 1
}
foo()
// a没有通过关键字声明，a is not defined

//第二段代码
function bar() {
    a = 1
    console.log(a);

}
bar()
//这是函数中的a没有通过关键字声明，所以不会被存放到AO中，而且 在执行log前，LHS已经赋予了a属性，所以能打印

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

AO = {
    arguments: {
        length: 0
    }
}

第一段代码：没有a的值，JS就会去全局中去找，全局也没有，所以会报错。
第二段代码：当执行console的时候，全局对象已经赋予了a属性（上面说过在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值），这时候就可以从全局中找到a的值，所以会打印。

案例2：

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

var foo = 1
//  ƒ foo() {
//     console.log("goo");
// }

结果：会打印函数，而不是undefined。
这是因为在进入执行上下文时，会首先处理函数声明，其次会处理变量声明，如果变量名称和已经声明的形式参数或者函数相同，则变量声明不会干扰已经存在的这类属性。