JavaScript深刻之执行上下文栈

JavaScript深刻系列第三篇，讲解执行上下文栈的是如何执行的，也回答了第二篇中的略难的思考题。

顺序执行？

若是要问到 JavaScript 代码执行顺序的话，想必写过 JavaScript 的开发者都会有个直观的印象，那就是顺序执行，毕竟：

var foo = function () {

    console.log('foo1');

}

foo();  // foo1

var foo = function () {

    console.log('foo2');

}

foo(); // foo2

然而去看这段代码：

function foo() {

    console.log('foo1');

}

foo();  // foo2

function foo() {

    console.log('foo2');

}

foo(); // foo2

打印的结果倒是两个 foo2。

刷过面试题的都知道这是由于 JavaScript 引擎并不是一行一行地分析和执行程序，而是一段一段地分析执行。当执行一段代码的时候，会进行一个“准备工做”，好比第一个例子中的变量提高，和第二个例子中的函数提高。

可是本文真正想让你们思考的是：这个“一段一段”中的“段”到底是怎么划分的呢？

到底JavaScript引擎遇到一段怎样的代码时才会作“准备工做”呢？

可执行代码

这就要说到 JavaScript 的可执行代码(executable code)的类型有哪些了？

其实很简单，就三种，全局代码、函数代码、eval代码。

举个例子，当执行到一个函数的时候，就会进行准备工做，这里的“准备工做”，让咱们用个更专业一点的说法，就叫作"执行上下文(execution contexts)"。

执行上下文栈

接下来问题来了，咱们写的函数多了去了，如何管理建立的那么多执行上下文呢？

因此 JavaScript 引擎建立了执行上下文栈（Execution context stack，ECS）来管理执行上下文

为了模拟执行上下文栈的行为，让咱们定义执行上下文栈是一个数组：

ECStack = [];

试想当 JavaScript 开始要解释执行代码的时候，最早遇到的就是全局代码，因此初始化的时候首先就会向执行上下文栈压入一个全局执行上下文，咱们用 globalContext 表示它，而且只有当整个应用程序结束的时候，ECStack 才会被清空，因此 ECStack 最底部永远有个 globalContext：

ECStack = [
        globalContext
    ];

如今 JavaScript 遇到下面的这段代码了：

function fun3() {
    console.log('fun3')
}

function fun2() {
    fun3();
}

function fun1() {
    fun2();
}

fun1();

当执行一个函数的时候，就会建立一个执行上下文，而且压入执行上下文栈，当函数执行完毕的时候，就会将函数的执行上下文从栈中弹出。知道了这样的工做原理，让咱们来看看如何处理上面这段代码：

// 伪代码

// fun1()
ECStack.push(<fun1> functionContext);

// fun1中居然调用了fun2，还要建立fun2的执行上下文
ECStack.push(<fun2> functionContext);

// 擦，fun2还调用了fun3！
ECStack.push(<fun3> functionContext);

// fun3执行完毕
ECStack.pop();

// fun2执行完毕
ECStack.pop();

// fun1执行完毕
ECStack.pop();

// javascript接着执行下面的代码，可是ECStack底层永远有个globalContext

解答思考题

好啦，如今咱们已经了解了执行上下文栈是如何处理执行上下文的，因此让咱们看看上篇文章《JavaScript深刻之词法做用域和动态做用域》最后的问题：

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

两段代码执行的结果同样，可是两段代码究竟有哪些不一样呢？

答案就是执行上下文栈的变化不同。

让咱们模拟第一段代码：

ECStack.push(<checkscope> functionContext);
ECStack.push(<f> functionContext);
ECStack.pop();
ECStack.pop();

让咱们模拟第二段代码：

ECStack.push(<checkscope> functionContext);
ECStack.pop();
ECStack.push(<f> functionContext);
ECStack.pop();

是否是有些不一样呢？

固然了，这样归纳的回答执行上下文栈的变化不一样，是否是依然有一种意犹未尽的感受呢，为了更详细讲解两个函数执行上的区别，咱们须要探究一下执行上下文到底包含了哪些内容，因此欢迎阅读下一篇《JavaScript深刻之变量对象》。

下一篇文章

《JavaScript深刻之变量对象》

深刻系列

JavaScript深刻系列目录地址：https://github.com/mqyqingfeng/Blog。

JavaScript深刻系列预计写十五篇左右，旨在帮你们捋顺JavaScript底层知识，重点讲解如原型、做用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念。

若是有错误或者不严谨的地方，请务必给予指正，十分感谢。若是喜欢或者有所启发，欢迎star，对做者也是一种鼓励。