【你不知道的JavaScript】（三）执行上下文及其生命周期

一、执行上下文概念

JavaScript代码的执行过程分为两个阶段：

代码编译阶段：由编译器完成，将代码翻译成可执行代码
代码执行阶段：由引擎完成，主要任务是执行可执行代码

其中可执行代码分为三种：全局代码、函数代码、eval代码

有关JavaScript代码的执行过程可查看《【你不知道的JavaScript】（一）作用域与词法作用域》一文。

简单来说，当在代码执行阶段执行到一个函数的时候，就会进行准备工作，这里的“准备工作”，就叫做"执行上下文(EC)"，也叫执行上下文环境，也叫执行环境。

当JavaScript代码执行时，会进入不同的执行上下文，而每个执行上下文的组成，基本如下：

当前执行上下文(EC)

二、执行上下文生命周期

当调用一个函数时（激活），一个新的执行上下文就会被创建。而一个执行上下文的生命周期可以分为两个阶段：

创建阶段：在这个阶段中，执行上下文会分别创建变量对象，建立作用域链，以及确定this的指向。

执行阶段：创建完成之后，就会开始执行代码，这个时候，会完成变量赋值，函数引用，以及执行其他代码。

执行上下文生命周期

详细了解执行上下文极为重要，因为其中涉及到了变量对象，作用域链，this等极为重要的概念，它关系到我们能不能真正理解JavaScript，下面我们分别了解几个概念。

（一）变量对象

1. 变量对象的创建过程

(1) 建立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;

// 上栗的执行顺序为
// 首先将所有函数声明放入变量对象中
function foo() { console.log('function foo') }

// 其次将所有变量声明放入变量对象中，
// 但是因为foo已经存在同名函数，因此此时会跳过undefined的赋值
// var foo = undefined;

// 然后开始执行阶段代码的执行
console.log(foo); // function foo
foo = 20;

2. 变量对象与活动对象

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

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

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

test();

↑以上代码中，全局作用域中运行test()时，test()的执行上下文开始创建。为了便于理解，我们用如下的形式来表示:

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

未进入执行阶段之前，变量对象中的属性都不能访问！但是进入执行阶段之后，变量对象转变为了活动对象，里面的属性都能被访问了，然后开始进行执行阶段的操作。

// 执行阶段
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();

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

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

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

（二）作用域链

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

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]为作用域链的最前端，而数组的最后一项，为作用域链的最末端，所有的最末端都为全局变量对象。

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

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

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

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

函数out作用域链

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

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

函数inner作用域链

（三）`this`指向

有关this的指向的详情，可查看《【你不知道的JavaScript】（四）this的全面解析》。

三、执行上下文栈

执行上下文可以理解为当前代码的执行环境，JavaScript中的运行环境大概包括三种情况：

全局环境：JavaScript代码运行起来会首先进入该环境
函数环境：当函数被调用执行时，会进入当前函数中执行代码
eval

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

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函数上下文环境

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

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

执行上下文入栈出栈的全过程

我们可以得到一些结论：

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