了解JavaScript的执行上下文

在这篇文章里，我将深入研究JavaScript中最基本的部分——执行上下文（execution context）。读完本文后，你应该清楚了解解释器做了什么，为什么函数和变量能在声明前使用以及他们的值是如何决定的。

什么是执行上下文？

当JavaScript代码运行，执行环境非常重要，有下面几种不同的情况：

1. 全局代码——你的代码首次执行的默认环境。
2. 函数代码——每当进入一个函数内部。
3. Eval代码——eval内部的文本被执行时。

在网上你能读到许多关于作用域（scope）的资源，本文的目的是让事情变得更简单，让我们将术语执行上下文想象为当前被执行代码的环境/作用域。说的够多了，现在让我们看一个包含全局和函数上下文的代码例子。

很简单的例子，我们有一个被紫色边框圈起来的全局上下文和三个分别被绿色，蓝色和橘色框起来的不同函数上下文。只有全局上下文（的变量）能被其他任何上下文访问。

你可以有任意多个函数上下文，每次调用函数创建一个新的上下文，会创建一个私有作用域，函数内部声明的任何变量都不能在当前函数作用域外部直接访问。在上面的例子中，函数能访问当前上下文外面的变量声明，但在外部上下文不能访问内部的变量/函数声明。为什么会发生这种情况？代码到底是如何被解释的？

执行上下文堆栈

浏览器里的JavaScript解释器被实现为单线程。这意味着同一时间只能发生一件事情，其他的行文或事件将会被放在叫做执行栈里面排队。下面的图是单线程栈的抽象视图：

我们已经知道，当浏览器首次载入你的脚本，它将默认进入全局执行上下文。如果，你在你的全局代码中调用一个函数，你程序的时序将进入被调用的函数，并穿件一个新的执行上下文，并将新创建的上下文压入执行栈的顶部。

如果你调用当前函数内部的其他函数，相同的事情会在此上演。代码的执行流程进入内部函数，创建一个新的执行上下文并把它压入执行栈的顶部。浏览器将总会执行栈顶的执行上下文，一旦当前上下文函数执行结束，它将被从栈顶弹出，并将上下文控制权交给当前的栈。下面的例子显示递归函数的执行栈调用过程：

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

这代码调用自己三次，每次给i的值加一。每次foo函数被调用，将创建一个新的执行上下文。一旦上下文执行完毕，它将被从栈顶弹出，并将控制权返回给下面的上下文，直到只剩全局上下文能为止。

有5个需要记住的关键点，关于执行栈（调用栈）：

• 单线程。
• 同步执行。
• 一个全局上下文。
• 无限制函数上下文。
• 每次函数被调用创建新的执行上下文，包括调用自己。

执行上下文的细节

我们现在已经知道没次调用函数，都会创建新的执行上下文。然而，在JavaScript解释器内部，每次调用执行上下文，分为两个阶段：

1.创建阶段【当函数被调用，但未执行任何其内部代码之前】：
创建作用域链（Scope Chain）
创建变量，函数和参数。
求”this“的值。
2.激活/代码执行阶段：
指派变量的值和函数的引用，解释/执行代码。
可以将每个执行上下文抽象为一个对象并有三个属性：

executionContextObj = {
    scopeChain: { /* 变量对象（variableObject）+ 所有父执行上下文的变量对象*/ }, 
    variableObject: { /*函数 arguments/参数，内部变量和函数声明 */ }, 
    this: {} 
}

原文链接：https://yanhaijing.com/javascript/2014/04/29/what-is-the-execution-context-in-javascript/