深入--执行上下文栈

 

顺序执行？

如果要问js代码执行顺序的话，写过js的开发者直观印象，就是顺序执行，比如：

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

 

javascript引擎并非一行一行分析和执行程序，而是一段一段地分析执行。当执行一段代码的时候，会进行一个“准备工作”，比如第一个例子中的变量提升，和第二个例子中的函数提升。

但是本文想让大家思考的是：这个“一段一段”中的“段”是怎么划分的呢？

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

 

可执行代码

 

javascript的可执行代码（executable code）类型就三种，全局代码、函数代码、eval代码

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

 

执行上下文栈

 

问题来了，这么多函数，如果管理创建的那么多执行上下文呢？

javascript引擎创建了执行上下文栈（execution context stack，ECS）来管理执行上下文，为了模拟ECS的行为，让我们定义执行上下文栈是一个数组：

ECStack = [];

 当javascript开始要解释执行代码的时候，最先遇到的就是全局代码，所以初始化的时候，首先就会向执行上下文压入一个全局执行上下文，我用globalContext表示，并且只有当整个应用程序结束时ECStack才会被清空，所以ECStack最底部永远有个globalContext：

ESCtack = [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

 

解答思考题

 

了解了执行上下文栈是如何处理执行上下文的，所以让我们看看《深入--词法作用域和动态作用域》最后的问题：

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();

 

当然了，这样概括的回答执行上下文栈的变化不同，是不是有一种意犹未尽的感觉，为了更详细讲解两个函数执行上的区别，我们需要探究一下执行上下文到底包含了那些内容，请看《深入--变量对象》