深入JavaScript 执行上下文(二)：执行上下文栈

• 深入JavaScript 执行上下文(一)：作用域
• 深入JavaScript 执行上下文(二)：执行上下文栈
• 深入JavaScript 执行上下文(三)：变量对象
• 深入JavaScript 执行上下文(四)：作用域链
• 深入JavaScript 执行上下文(五)：整个过程

执行上下文栈（环境栈）

---

1、可执行代码

这就要说到 JavaScript 的可执行代码的类型有哪些了？
其实很简单，就三种，全局代码、函数代码、eval代码。
举个例子，当执行到一个函数的时候，就会进行准备工作，这里的“准备工作”，让我们用个更专业一点的说法，就叫做"执行上下文(execution context)"。

2、执行上下文栈（环境栈）

接下来问题来了，我们写的函数多了去了，如何管理创建的那么多执行上下文呢？
所以 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( functionContext);

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

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

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

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

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

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

3、思考题

下面两段代码执行结果是一样的，如果从执行上下文栈的角度分析，上下两段代码有什么区别？

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

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

答：
上面两段代码执行上下文栈的变化是不一样的。
让我们模拟第一段代码：

ECStack.push( functionContext);
ECStack.push( functionContext);
ECStack.pop();
ECStack.pop();

让我们模拟第二段代码：

ECStack.push( functionContext);
ECStack.pop();
ECStack.push( functionContext);
ECStack.pop();

---

下一篇：深入JavaScript 执行上下文(三)：变量对象