JS复习 -- 执行上下文栈

桃扇骨 2022-06-06 02:26 193阅读 0赞

思考题：下面两段代码有何不同：

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

答案是：两段代码的执行结果一样，但是两个代码的执行上下文栈的变化不同。

And 重点来了，执行上下文栈是什么呢？

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

但函数很多的时候，JavaScript又是如何管理这么多的函数呢？

所以 JavaScript 引擎创建了执行上下文栈（Execution context stack）来管理函数的执行上下文。为了模拟执行上下文栈的行为，定义执行上下文栈是一个数组：ECStack = \[\]。

*注：当 JavaScript 开始要解释执行代码的时候，最先遇到的就是全局函数，所以初始化的时候首先就会向执行上下文栈压入一个全局执行上下文 globalContext ；并且只有当整个应用程序结束的时候，ECStack 才会被清空。所以在代码执行过程中，ECStack 最底部永远有个 globalContext。*

JS的执行上下文栈的规则是：当执行一个函数的时候，就会创建一个执行上下文，并且压入执行上下文栈，当函数执行完毕的时候，就会将该函数的执行上下文从栈中弹出。

下面，我们回到最开始的问题中，两段代码的执行上下文栈的变化分别是：

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

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