前端基础(1):变量对象和执行环境深入理解

背景

夯实基础才是进步的根源，基础不牢地动山摇！！于是乎，结合《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. 全局环境入栈

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

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

   
   wechatimg1
4. 在swapColors的可执行代码中，再没有遇到其他能生成执行环境的情况，所以在swapColors顺利执行完毕后，swapColors的环境从栈中弹出
5. swapColors环境弹出后继续changeColor的执行，发现没有可以执行的了。然后就弹出。
6. 最后只剩下全局环境了。这个是要只有关闭当前网页或者浏览器就能销毁该环境。

总结

1. 所有变量都存在于一个执行环境中。
2. 全局环境只能访问全局环境中的变量和函数，不能访问局部环境中的任何数据。3. 执行环境有全局执行环境和函数执行环境之分。
3. js单线程，是同步执行的，只有栈顶的环境处于执行中，其他环境需要等待。

2、变量对象的理解

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

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

1. 建立arguments对象。检查当前上下文中的参数，建立该对象下的属性与属性值。2. 检查当前上下文的函数声明，也就是使用function关键字声明的函数。在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在，那么该属性将会被新的引用所覆盖。
2. 检查当前上下文中的变量声明，每找到一个变量声明，就在变量对象中以变量名建立一个属性，属性值为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: ‘函数引用’, // 表示foo的地址引用    
    a: undefined
}
// 执行阶段VO ->  AO  // 
Active ObjectAO = {    
    arguments: {    c: 3,    d: 4    },   
    bar: ‘函数引用’,    
    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: '函数引用',
    a: 1
}

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

最后全局环境的变量对象

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

总结：

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

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

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

感谢

《javascript高级程序设计》

知乎上面的答案

波同学变量对象详解