【译】JS的执行上下文和环境栈是什么？-CFANZ编程社区

这篇文章中，我将深入探讨JavaScript中的一个最基本的部分，即执行上下文（或称环境）。读过本文后，你将更加清楚地了解到解释器尝试做什么，为什么在声明某些函数/变量之前，可以使用它们以及它们的值是如何确定的。

执行上下文是什么？

在运行JavaScript代码时，执行环境非常重要，并可以认为是以下其中之一：

全局代码 - 默认环境，你的代码第一时间在这里执行。
函数代码 - 当执行流进入函数体的时候。
Eval代码 - eval函数内部的文本。【eval不建议使用】

你可以在网上查到大量的关于scope（作用域）的资料，本文的目的就是要让事情更加容易理解。我们把术语执行上下文视为当前代码的评估环境/范围。现在，条件充足，我们看个包含全局和函数/本地上下文评估代码的示例。

【译】JS的执行上下文和环境栈是什么？_javascript

这里没什么特别的，我们有1个由紫色边框表示的全局上下文和由绿色、蓝色和橙色边框表示的3个不同的函数上下文。只有1个全局上下文，我们可以从程序的任何其它上下文访问。

你可以拥有任意数量的函数上下文，并且每个函数调用都会创建一个新的上下文，从而创建一个私有的作用域，无法从当前函数作用域外直接访问函数内部声明的任何内容。在上面的例子中，函数可以访问在其当前上下文之外声明的变量，但是外部上下文无法访问（函数）其中声明的变量/函数。为什么会这样？这段代码究竟是如何评估的？

环境栈

浏览器中的JavaScript解释器是单线程实现的。这意味着在浏览器中一次只能发生一件事情，其它动作或事件在所谓的执行栈中排队。下图是单线程栈的抽象视图：

【译】JS的执行上下文和环境栈是什么？_前端_02

我们知道，当浏览器首次加载脚本时，它默认进入全局执行上下文。如果在全局代码中调用一个函数，程序的顺序流就进入被调用的函数，创建一个新的执行上下文并将该上下文推送到执行栈的顶部。

如果你在当前函数中调用另外一个函数，则会发生同样的事情。代码的执行流程进入函数内部，该函数创建一个新的执行上下文，该上下文被推送到现有栈的顶部。浏览器将始终执行位于栈顶部的当前执行上下文，并且一旦函数完成当前执行上下文，它将从栈顶弹出，将控制权返回当前栈的栈顶上下文。下面的例子展示了递归函数和其程序的执行栈：

(function foo(i) {
    if (i === 3) {
        return;
    }
    else {
        foo(++i);
    }
}(0));

【译】JS的执行上下文和环境栈是什么？_执行栈_03

上面代码只调用自身3次，将i的值递增1。每次调用函数foo时，都会创建一个新的执行上下文。一旦上下文执行完毕，它就会弹出栈并且将控制权返回它下面的上下文，直到再次到达全局上下文。

关于执行栈有五个关键点：

单线程
同步执行
1个全局上下文
无限的函数上下文
每个函数调用都会创建一个新的执行上下文，甚至是调用自身

执行上下文的细节

所以，我们现在知道每次调用一个函数时，都会创建一个新的执行上下文。但是，在JavaScript的解释器中，执行上下文的调用都有两个阶段：

创建阶段【调用函数时，但是在执行里面的代码之前】:

创建作用域链
创建变量，函数和参数
确定this的值

激活/代码执行阶段:

分配值，引用函数和解析/执行代码

可以将每个执行上下文在概念上标示为具有3个属性的对象：

executionContextObj = {
    'scopeChain': { /* variableObject + all parent execution context's variableObject */ },
    'variableObject': { /* function arguments / parameters, inner variable and function declarations */ },
    'this': {}
}

活动/变量对象【AO/VO】

调用函数时，但在执行实际函数之前，会创建此executionContextObj。这被称为阶段1，即创建阶段。这里，解释器通过扫描传入的参数或参数的函数、本地函数声明和局部函数声明来创建executionContextObj。此扫描的结果将称为executionContextObj中的variableObject。

以下是解释器如何评估代码的伪概述：

找些代码来调用一个函数
在执行函数代码之前，创建执行上下文。
进入创建阶段

初始化作用域链
创建变量对象：

创建arguments对象，检查参数的上下文，初始化名称和值并创建引用的副本。
扫描上下文以获取函数声明：

对于找到的每个函数，在变量对象（或活动对象）中创建一个属性，该属性是确切的函数名称，该函数具有指向内存中函数的引用指针。
如果函数名已存在，则将覆盖引用指针值。

扫面上下文以获取变量声明：

对于找到的每个变量声明，在变量对象（或活动对象）中创建一个属性，该属性是变量名称，并将值初始化为undefined。
如果变量名称已存在于变量对象（或活动对象）中，则不执行任何操作并继续扫描（即跳过）。

确定上下文中的this。

激活/代码执行阶段:

在上下文中运行/解释功能代码，并在代码逐行执行时分配变量值。

看下下面的例子：

function foo(i) {
    var a = 'hello';
    var b = function privateB() {

    };
    function c() {

    }
}

foo(22);

调用foo(22)，创建阶段如下：

fooExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: undefined,
        b: undefined
    },
    this: { ...

正如你所见，创建阶段处理定义属性的名称，而不是为它们赋值，但正式参数/参数除外。创建阶段完成后，执行流程进入函数，激活/代码执行阶段在函数执行完毕后如下所示：

fooExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: 'hello',
        b: pointer to function privateB()
    },
    this: { ... }
}

“提升”一词

你可以在网上找到很多定义JavaScript术语-提升的资源,解释变量和函数声明是否被提升到其功能范围的顶部。但是，没有人详细解释为什么会发生这种情况，在掌握了关于解释器如何创建活动对象的新知识点，就很容易理解为什么了。看下下面的代码例子：

(function() {

    console.log(typeof foo); // function pointer
    console.log(typeof bar); // undefined

    var foo = 'hello',
        bar = function() {
            return 'world';
        };

    function foo() {
        return 'hello';
    }

}());