【JS进阶】执行上下文与执行栈

执行上下文与执行栈

1.执行上下文

简单来说，执行上下文是一种对 JS 代码执行环境的抽象概念，即只要有 JS 代码在运行，那么它就一定是运行在执行上下文中。

执行上下文的类型分为三种：

• 全局执行上下文：有且只有一个，浏览器中的全局对象就是 window 对象，全局执行上下文中的 this 指向这个全局对象
• 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文
• Eval 函数执行上下文：指的是运行在 eval 函数中的代码，很少用而且不建议使用

例：

在上面的图中，紫色框的部分为全局上下文，而绿色、蓝色和橙色框的部分，则是不同的函数上下文。可以看到，只有全局上下文中的变量、方法，能够被其它任何上下文访问。

但是可以有任意多个函数上下文，每次调用函数创建一个新的上下文，会创建一个私有作用域，函数内部声明的任何变量都不能在当前函数作用域外部直接访问。

所以，执行上下文的特点在于：

• 单线程。
• 同步执行。
• 只有一个全局上下文。
• 可有无数个函数上下文。 每个函数调用都会创建一个新的 执行上下文，哪怕是递归调用。

2.执行上下文的生命周期

执行上下文的生命周期包括三个阶段：创建阶段 → 执行阶段 → 回收阶段。

• 创建阶段：这个阶段后面会详细分析。
• 执行阶段：执行变量赋值、代码执行
• 回收阶段：执行上下文出栈，等待虚拟机回收。

如图：

3.执行上下文的创建阶段

每个执行上下文的基本组成如下：

下面来分别对这几项工作以及关键概念进行介绍。

3.1 生成变量对象

a.变量对象的创建过程

1. 建立arguments对象。检查当前上下文中的参数，并建立 arguments对象下的属性与属性值之间的对应关系。
2. 检查当前上下文的函数声明，也就是使用function关键字进行声明的函数。在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用。若该函数名的属性已经存在了，则会用新的引用覆盖。
3. 检查当前上下文中的变量声明，每找到一个变量声明，就在变量对象中以变量名建立一个属性，其值默认为undefined。同时，为了防止与变量同名的函数被修改为undefined，则会直接将其跳过，不修改其属性值。

如图：

但是有一件需要注意的事：

function foo() { console.log('function foo') }
var foo = 20;

console.log(foo); // 20

// 以上代码中，变量声明的 foo 遇到函数声明的 foo 会跳过，
// 可是为什么最后 foo 的输出结果仍然是被覆盖了呢？
// 那是因为三条规则仅仅适用于变量对象的创建过程，也就是执行上下文的创建过程。
// 而 foo=20 是在执行上下文的执行过程中运行的，输出结果自然会是20。

再来看另一个例子：

console.log(foo); // ƒ foo() { console.log('function foo') }
function foo() { console.log('function foo') }
var foo = 20;

上面例子的执行顺序为：

1. 首先将所有函数声明放入变量对象中，即：function foo() { console.log('function foo') }
2. 其次将所有变量声明放入对象变量中，即：var foo。而此时因为已经存在同名的函数foo()，所以会跳过对 foo 变量的 undefined 赋值。
3. 然后执行代码，即：console.log(foo); foo = 20;

因此，这里输出的 foo 为函数对象，而不是 20。

其中关键的地方在于：始终将var foo = 20视为两个分离的操作，即var foo和foo = 20。从而使得在赋值之前，输出 foo 变量。

b.变量对象与活动对象

变量对象与活动对象其实都是同一个对象，只是处于执行上下文的不同生命周期。不过只有处于函数调用栈栈顶的执行上下文中的变量对象，才会变成活动对象。

看下面这个例子：

function test() {
    console.log(a);
    console.log(foo());

    var a = 1;
    function foo() {
        return 2;
    }
}

test();

在全局作用域中调用test()时，test()的执行上下文开始创建。

在创建过程中，test 方法的执行上下文结构如下：

testEC = {
	// VO 为 Variable Object的缩写，即变量对象
    VO: {
        //注：在浏览器的展示中，函数的参数可能并不是放在arguments对象中
        arguments: {...},  
        foo: <foo reference>,  // 表示 foo 的地址引用
        a: undefined,
        this: Window
    },
    scopeChain: {}
}

而未进入执行阶段之前，变量对象 VO 中的属性均不能访问！但是进入执行阶段后，变量对象转为活动对象，其中的属性均可以被访问，随后开始执行阶段的各项操作。

// 执行阶段
VO ->  AO   // Active Object 活动对象
AO = {
    arguments: {...},
    foo: <foo reference>,
    a: 1,
    this: Window
}

所以，在上面的例子中，代码的执行顺序如下：

function test() {
    //创建阶段
    function foo() {
        return 2;
    }
    var a;
    
    //执行阶段
    console.log(a); // undefined
    console.log(foo()); // 2
    a = 1;
}

test();

c.全局上下文的变量对象

全局上下文有一个特殊的地方，它的变量对象，就是window对象。而这个特殊，在this指向上也同样适用，this也是指向window。

除此之外，全局上下文的生命周期，与程序的生命周期一致，只要程序运行不结束，比如关掉浏览器窗口，全局上下文就会一直存在。其他所有的上下文环境，都能直接访问全局上下文的属性。

3.2 创建作用域链

作用域链本质上是一个指向当前环境与上层环境的一系列变量对象的指针列表（它只引用但不实际包含变量对象），作用域链保证了当前执行环境对符合访问权限的变量和函数的有序访问。

看下面这个例子：

var a = 1;             
function out() {
    var b = 2;
    function inner() {
        var c = 3;
        console.log(a+b+c);
    }
    inner();          
}
out();

首先，代码开始运行时就创建了全局上下文环境，接着运行到out()时创建 out函数的执行上下文，最后运行到inner()时创建 inner函数的执行上下文，我们设定他们的变量对象分别为VO(global)，VO(out), VO(inner)。

我们可以直接用一个数组来表示作用域链，数组的第一项scopeChain[0]为作用域链的最前端，而数组的最后一项，为作用域链的最末端。

注意，所有的最末端都为全局变量对象！

1. 对于全局作用域链：由于它只含全局作用域，没有上级，因此它的作用域链只指向本身的全局变量对象。在查找标识符时只能从本身的全局变量对象中查找。

   此时的全局上下文环境如下：

   // 全局上下文环境
   globalEC = {
       VO: {
           out: <out reference>,  // 表示 out 的地址引用
           a: undefined
       },
       scopeChain: [VO(global)], // 作用域链
   }
   

2. 对于函数out的作用域链：可以引用函数out本身的变量对象以及全局的变量对象。查找标识符时，先在函数out变量对象中寻找，找不到的话再去上一级全局变量对象查找。

   此时out函数的执行上下文环境如下：

   // out 函数的执行上下文
   outEC = {
       VO: {
           arguments: {...},
           inner: <inner reference>,  // 表示 inner 的地址引用
           b: undefined
       },
       scopeChain: [VO(out), VO(global)], // 作用域链
   }
   

   如图：
   

3. 对于函数inner的作用域链：可以引用函数inner本身的变量对象和上一级out函数的变量对象以及全局的变量对象。查找标识符时依次从inner，out，全局变量对象中查找。

   此时inner函数的执行上下文环境如下：

   innerEC = {
       VO: {
           arguments: {...},  
           c: undefined,
       },  // 变量对象
       scopeChain: [VO(inner), VO(out), VO(global)], // 作用域链
   }
   

   如图：
   

3.3 确定 this 指向

有关this的指向问题，见…

4.执行上下文栈

在代码开始执行时，首先会产生一个全局执行上下文环境，调用函数时，会产生函数执行上下文环境，函数调用完成后，它的执行上下文环境以及其中的数据都会被销毁，重新回到全局执行环境，网页关闭后全局执行环境也会销毁。其实这是一个压栈出栈的过程，全局上下文环境永远在栈底，而当前正在执行的函数上下文在栈顶。

例如：

var a = 1;             //1.进入全局上下文环境
function out() {
    var b = 2;
    function inner() {
        var c = 3;
        console.log(a+b+c);
    }
    inner();          //3.进入inner函数上下文环境
}
out(); //2.进入out函数上下文环境

↑以上代码的执行会经历以下过程：

1. 当代码开始执行时就创建全局执行上下文环境，全局上下文入栈。
2. 全局上下文入栈后，其中的代码开始执行，进行赋值、函数调用等操作，执行到out()时，激活函数out创建自己的执行上下文环境，out函数上下文入栈。
3. out函数上下文入栈后，其中的代码开始执行，进行赋值、函数调用等操作，执行到inner()时，激活函数inner创建自己的执行上下文环境，inner函数上下文入栈。
4. inner函数上下文入栈后，其中的代码开始执行，进行赋值、函数调用、打印等操作，由于里面没有可以生成其他执行上下文的需要，所有代码执行完毕后，inner函数上下文出栈。
5. inner函数上下文出栈，又回到了out函数执行上下文环境，接着执行out函数中后面剩下的代码，由于后面没有可以生成其他执行上下文的需要，所有代码执行完毕后，out函数上下文出栈。
6. out函数上下文出栈后，又回到了全局执行上下文环境，直到浏览器窗口关闭，全局上下文出栈。

如下图：

总结

我们可以得到一些结论：

• 全局上下文在代码开始执行时就创建，只有唯一的一个，永远在栈底，浏览器窗口关闭时出栈。
• 函数被调用的时候创建上下文环境。
• 只有栈顶的上下文处于活动状态，其变量对象成为活动对象，并执行其中的代码。