变量对象和执行环境的理解

背景

夯实基础才是进步的根源，基础不牢地动山摇！！于是乎，结合《javascript高级程序设计》来点基础的学习和理解。本文主要会有两部分。rt！！

正文

1、执行环境的理解

执行环境（或者执行上下文）（execution context 后面简称ec）定义了变量或者函数有权访问的其他数据，决定了他们各自的行为。如果不好理解的话，接着看后面。

全局执行环境是最外围的一个执行环境，在web浏览器中，全局执行环境被默认为是指window对象。因此所有的全局变量和函数都是作为window对象的属性和方法创建的。全局执行环境直到应用程序推出才会被销毁（例如关闭网页或者浏览器的时候）。

每个函数都有自己的执行环境。当执行流进入一个函数的时候，函数的环境就会被推入一个环境栈中，而在函数执行之后，栈将其环境弹出。把控制权返回给之前的执行环境了。

执行环境一般分为全局执行环境和函数执行环境。

这个时候应该上代码了(高程上的代码)

var color = 'blue';

function changeColor() {
    var anotherColor = 'red';

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}

changeColor();

来看看流程吧：

1. 全局环境入栈
   

2. 全局环境入栈之后，其中的可执行代码开始执行，直到遇到了changeColor()，这一句激活函数changeColor创建它自己的执行上下文，因此第二步就是changeColor的执行上下文入栈。
   

3. changeColor的环境入栈之后，js执行引擎开始执行其中的可执行代码，遇到swapColors()之后又激活了一个执行上下文。因此第三步是swapColors的执行上下文入栈。
   

4. 在swapColors的可执行代码中，再没有遇到其他能生成执行环境的情况，所以在swapColors顺利执行完毕后，swapColors的环境从栈中弹出

5. swapColors环境弹出后继续changeColor的执行，发现没有可以执行的了。然后就弹出。

6. 最后只剩下全局环境了。这个是要只有关闭当前网页或者浏览器就能销毁该环境。

总结

1. 所有变量都存在于一个执行环境中。

2. 全局环境只能访问全局环境中的变量和函数，不能访问局部环境中的任何数据。

3. 执行环境有全局执行环境和函数执行环境之分。

4. js单线程，是同步执行的，只有栈顶的环境处于执行中，其他环境需要等待。

2、变量对象的理解

上面我们讲到了执行环境，环境中的变量和函数都是保存在什么地方的呢？

好了，不卖关子了。每个执行环境都有一个与该环境相关联的变量对象（variable object）。环境中定义的所有变量和函数都是保存在这个对象中的。虽然我们编写的代码没有办法直接访问这个对象，但是js解析器在处理数据的时候会使用它。

执行环境的生命周期：

变量对象的创建

上面就是变量对象的一个创建过程，这个过程的解释：

1. 建立arguments对象。检查当前上下文中的参数，建立该对象下的属性与属性值。

2. 检查当前上下文的函数声明，也就是使用function关键字声明的函数。在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在，那么该属性将会被新的引用所覆盖。

3. 检查当前上下文中的变量声明，每找到一个变量声明，就在变量对象中以变量名建立一个属性，属性值为undefined。如果该变量名的属性已经存在，为了防止同名的函数被修改为undefined，则会直接跳过，原属性值不会被修改。

上面的代码解释：

function test(c, d) {
    console.log(d);
    console.log(a);
    console.log(bar());
    console.log(c);
    
    var a = 1;
    function bar() {
        return 2;
    }
}

test(3,4);


//创建过程  EC = execution context
testEC = {
    // 变量对象
    VO: {},
    // 作用于链
    scopeChain: {},
    // 确定this指向
    this: {}
}

// VO = Variable Object，即变量对象
VO = {
    arguments: {
        c: undefined,
        d: undefined
    },  //注：在浏览器的展示中，函数的参数可能并不是放在arguments对象中，这里为了方便理解，我做了这样的处理
    bar: <bar reference>  // 表示foo的地址引用
    a: undefined
}

// 执行阶段
VO ->  AO   // Active Object
AO = {
    arguments: {
        c: 3,
        d: 4
    },
    bar: <bar reference>,
    a: 1
}


// 实际执行
function test(c, d) {
    // arguments = { c : 3, d : 4 }; // 这样理解方便点，理解arguments对象
    function foo() {
        return 2;
    }
    var a;
    console.log(a);
    console.log(foo());
    a = 1;
}

test(3, 4);

就是在执行环境在创建阶段的时候所有的变量是不能被访问的，只有在执行阶段的时候才能被访问，因为此时的变量对象被转换成了活动对象。

// 执行阶段
VO ->  AO   // Active Object
AO = {
    arguments: {...},
    foo: <foo reference>,
    a: 1
}

说到底变量对象和活动对象本质上是一样的，只是处于执行环境的不同生命期。

最后全局环境的变量对象

windowEC = {
    VO: window,
    scopeChain: {},
    this: window
}

总结：

1. 活动对象和变量对象是执行环境在不同生命期的不同叫法。

2. function声明会比var声明优先级更高一点。

3. 未进入执行阶段之前，变量对象中的属性都不能访问。

感谢

《javascript高级程序设计》
知乎上面的答案
波同学变量对象详解