[译] 理解 JavaScript 中的执行上下文和执行栈

• 原文地址：Understanding Execution Context and Execution Stack in Javascript
• 原文做者：Sukhjinder Arora
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：CoolRice
• 校对者：linxuesia, CoderMing

照片来自 Unsplash 的做者 Greg Rakozy

若是你是或者想成为一名 JavaScript 开发者，你必须知道 JavaScript 程序内部是如何执行的。理解执行上下文和执行栈对于理解其余 JavaScript 概念（如变量声明提高，做用域和闭包）相当重要。

正确理解执行上下文和执行栈的概念将使您成为更出色的 JavaScript 开发者。

闲话少说，让咱们开始吧 :)

---

分享自 Bit 的博客 ❤️

使用 Bit 应用所提供的组件做为构建模块，你就是架构师。随时随地和你的团队分享、发现和开发组件，快来尝试鲜！

• Bit - 分享和创造代码组件: Bit 能帮助你在不一样项目和应用中分享、发现和使用代码组件来建立新功能和……

---

什么是执行上下文？

简而言之，执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行。

执行上下文的类型

JavaScript 中有三种执行上下文类型。

• 全局执行上下文 — 这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：建立一个全局的 window 对象（浏览器的状况下），而且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。
• 函数执行上下文 — 每当一个函数被调用时, 都会为该函数建立一个新的上下文。每一个函数都有它本身的执行上下文，不过是在函数被调用时建立的。函数上下文能够有任意多个。每当一个新的执行上下文被建立，它会按定义的顺序（将在后文讨论）执行一系列步骤。
• Eval 函数执行上下文 — 执行在 eval 函数内部的代码也会有它属于本身的执行上下文，但因为 JavaScript 开发者并不常用 eval，因此在这里我不会讨论它。

执行栈

执行栈，也就是在其它编程语言中所说的“调用栈”，是一种拥有 LIFO（后进先出）数据结构的栈，被用来存储代码运行时建立的全部执行上下文。

当 JavaScript 引擎第一次遇到你的脚本时，它会建立一个全局的执行上下文而且压入当前执行栈。每当引擎遇到一个函数调用，它会为该函数建立一个新的执行上下文并压入栈的顶部。

引擎会执行那些执行上下文位于栈顶的函数。当该函数执行结束时，执行上下文从栈中弹出，控制流程到达当前栈中的下一个上下文。

让咱们经过下面的代码示例来理解：

let a = 'Hello World!';

function first() {
  console.log('Inside first function');
  second();
  console.log('Again inside first function');
}

function second() {
  console.log('Inside second function');
}

first();
console.log('Inside Global Execution Context');
复制代码

上述代码的执行上下文栈。

当上述代码在浏览器加载时，JavaScript 引擎建立了一个全局执行上下文并把它压入当前执行栈。当遇到 first() 函数调用时，JavaScript 引擎为该函数建立一个新的执行上下文并把它压入当前执行栈的顶部。

当从 first() 函数内部调用 second() 函数时，JavaScript 引擎为 second() 函数建立了一个新的执行上下文并把它压入当前执行栈的顶部。当 second() 函数执行完毕，它的执行上下文会从当前栈弹出，而且控制流程到达下一个执行上下文，即 first() 函数的执行上下文。

当 first() 执行完毕，它的执行上下文从栈弹出，控制流程到达全局执行上下文。一旦全部代码执行完毕，JavaScript 引擎从当前栈中移除全局执行上下文。

怎么建立执行上下文？

到如今，咱们已经看过 JavaScript 怎样管理执行上下文了，如今让咱们了解 JavaScript 引擎是怎样建立执行上下文的。

建立执行上下文有两个阶段：1) 建立阶段 和 2) 执行阶段。

The Creation Phase

在 JavaScript 代码执行前，执行上下文将经历建立阶段。在建立阶段会发生三件事：

1. this 值的决定，即咱们所熟知的 This 绑定。
2. 建立词法环境组件。
3. 建立变量环境组件。

因此执行上下文在概念上表示以下：

ExecutionContext = {
  ThisBinding = <this value>,
  LexicalEnvironment = { ... },
  VariableEnvironment = { ... },
}
复制代码

This 绑定：

在全局执行上下文中，this 的值指向全局对象。(在浏览器中，this引用 Window 对象)。

在函数执行上下文中，this 的值取决于该函数是如何被调用的。若是它被一个引用对象调用，那么 this 会被设置成那个对象，不然 this 的值被设置为全局对象或者 undefined（在严格模式下）。例如：

let foo = {
  baz: function() {
  console.log(this);
  }
}

foo.baz();   // 'this' 引用 'foo', 由于 'baz' 被
             // 对象 'foo' 调用

let bar = foo.baz;

bar();       // 'this' 指向全局 window 对象，由于
             // 没有指定引用对象
复制代码

词法环境

官方的 ES6 文档把词法环境定义为

词法环境是一种规范类型，基于 ECMAScript 代码的词法嵌套结构来定义标识符和具体变量和函数的关联。一个词法环境由环境记录器和一个可能的引用外部词法环境的空值组成。

简单来讲词法环境是一种持有标识符—变量映射的结构。（这里的标识符指的是变量/函数的名字，而变量是对实际对象[包含函数类型对象]或原始数据的引用）。

如今，在词法环境的内部有两个组件：(1) 环境记录器和 (2) 一个外部环境的引用。

1. 环境记录器是存储变量和函数声明的实际位置。
2. 外部环境的引用意味着它能够访问其父级词法环境（做用域）。

词法环境有两种类型：

• 全局环境（在全局执行上下文中）是没有外部环境引用的词法环境。全局环境的外部环境引用是 null。它拥有内建的 Object/Array/等、在环境记录器内的原型函数（关联全局对象，好比 window 对象）还有任何用户定义的全局变量，而且 this的值指向全局对象。
• 在函数环境中，函数内部用户定义的变量存储在环境记录器中。而且引用的外部环境多是全局环境，或者任何包含此内部函数的外部函数。

环境记录器也有两种类型（如上！）：

1. 声明式环境记录器存储变量、函数和参数。
2. 对象环境记录器用来定义出如今全局上下文中的变量和函数的关系。

简而言之，

• 在全局环境中，环境记录器是对象环境记录器。
• 在函数环境中，环境记录器是声明式环境记录器。

注意 — 对于函数环境，声明式环境记录器还包含了一个传递给函数的 arguments 对象（此对象存储索引和参数的映射）和传递给函数的参数的 length。

抽象地讲，词法环境在伪代码中看起来像这样：

GlobalExectionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
    }
    outer: <null>
  }
}

FunctionExectionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // 在这里绑定标识符
    }
    outer: <Global or outer function environment reference>
  }
}
复制代码

变量环境：

它一样是一个词法环境，其环境记录器持有变量声明语句在执行上下文中建立的绑定关系。

如上所述，变量环境也是一个词法环境，因此它有着上面定义的词法环境的全部属性。

在 ES6 中，词法环境组件和变量环境的一个不一样就是前者被用来存储函数声明和变量（let 和 const）绑定，然后者只用来存储 var 变量绑定。

咱们看点样例代码来理解上面的概念：

let a = 20;
const b = 30;
var c;

function multiply(e, f) {
 var g = 20;
 return e * f * g;
}

c = multiply(20, 30);
复制代码

执行上下文看起来像这样：

GlobalExectionContext = {

  ThisBinding: <Global Object>,

  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
      a: < uninitialized >,
      b: < uninitialized >,
      multiply: < func >
    }
    outer: <null>
  },

  VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
      c: undefined,
    }
    outer: <null>
  }
}

FunctionExectionContext = {
  ThisBinding: <Global Object>,

  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // 在这里绑定标识符
      Arguments: {0: 20, 1: 30, length: 2},
    },
    outer: <GlobalLexicalEnvironment>
  },

VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // 在这里绑定标识符
      g: undefined
    },
    outer: <GlobalLexicalEnvironment>
  }
}
复制代码

注意 — 只有遇到调用函数 multiply 时，函数执行上下文才会被建立。

可能你已经注意到 let 和 const 定义的变量并无关联任何值，但 var 定义的变量被设成了 undefined。

这是由于在建立阶段时，引擎检查代码找出变量和函数声明，虽然函数声明彻底存储在环境中，可是变量最初设置为 undefined（var 状况下），或者未初始化（let 和 const 状况下）。

这就是为何你能够在声明以前访问 var 定义的变量（虽然是 undefined），可是在声明以前访问 let 和 const 的变量会获得一个引用错误。

这就是咱们说的变量声明提高。

执行阶段

这是整篇文章中最简单的部分。在此阶段，完成对全部这些变量的分配，最后执行代码。

注意 — 在执行阶段，若是 JavaScript 引擎不能在源码中声明的实际位置找到 let 变量的值，它会被赋值为 undefined。

结论

咱们已经讨论过 JavaScript 程序内部是如何执行的。虽然要成为一名卓越的 JavaScript 开发者并不须要学会所有这些概念，可是若是对上面概念能有不错的理解将有助于你更轻松，更深刻地理解其余概念，如变量声明提高，做用域和闭包。

就是这样，若是你发现这篇文章有用，请点击 👏 按钮并在下面自由地评论！我很乐意和你讨论 😃。

---

分享自 Bit 的博客

Bit 使得在项目和应用中分享小型组件和模块变得很是简单，使您和您的团队能够更快地构建代码。随时随地和你的团队分享、发现和开发组件，快来尝鲜！

• Bit - 分享和创造代码组件: Bit 能帮助你在不一样项目和应用中分享、发现和使用代码组件来建立新功能和……

---

了解更多

• 2018 年你应该知道的 11 种 React UI 组件库：2018 年 11 种拥有优秀组件的 React 组件库，用于构建下一代应用程序 UI 界面。

• 加快 Vue.js 应用开发的 5 种工具：加速你的 Vue.js 应用开发速度。

• 在 React 中如何写出更好的代码：9 个在 React 中写出更好代码的实用小贴士：学习 Linting、propTypes、PureComponent 还有更多。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。