学习链接

深入理解JavaScript执行上下文和执行栈（👍👍👍）

JavaScript深入之执行上下文栈

【译】理解 JavaScript 执行上下文和执行栈（👍👍👍）

执行上下文和执行栈

执行上下文（Execution Context）

什么是执行上下文

简而言之，执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念， JavaScript 中运行任何的代码都是在执行上下文中运行

执行上下文的类型

执行上下文总共有三种类型：

  • 全局执行上下文
    一个程序中只能存在一个全局执行上下文，浏览器中的全局对象就是 window 对象，this 指向这个全局对象。
  • 函数执行上下文
    一个程序中可存在任意数量的函数执行上下文，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文。
  • Eval 函数执行上下文
    运行在 eval 函数中的代码有自己的执行上下文，但该函数很少用而且不建议使用。

执行上下文的生命周期

执行上下文的生命周期包括三个阶段：创建阶段→执行阶段→回收阶段，本文重点介绍创建阶段。

创建阶段

在任意的 JavaScript 代码被执行前，执行上下文处于创建阶段。在创建阶段中总共发生了三件事情：

  1. 确定 this 的值，也被称为 This Binding。
  2. LexicalEnvironment（词法环境） 组件被创建。
  3. VariableEnvironment（变量环境） 组件被创建。

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

  1. ExecutionContext = {  
  2.     ThisBinding = <this value>,  
  3.     LexicalEnvironment = { ... },  
  4.     VariableEnvironment = { ... },  
  5. }

This Binding:

this 的值是在执行的时候才能确认，定义的时候不能确认！

因为 this 是执行上下文环境的一部分，而执行上下文需要在代码执行之前确定，而不是定义的时候。

  • 在全局执行上下文中，this 的值指向全局对象，在浏览器中，this 的值指向 window 对象。
  • 在函数执行上下文中，this 的值取决于函数的调用方式。如果它被一个对象引用调用，那么 this 的值被设置为该对象，否则 this 的值被设置为全局对象或 undefined（严格模式下）。

词法环境（Lexical Environment）

词法环境对象由两部分组成：

  1. 环境记录（Environment Record）： 一个存储所有局部变量作为其属性的对象，是存储变量和函数声明的实际位置。
  2. 对外部词法环境的引用，与外部代码相关联，意味着可以访问其外部词法环境。

一个“变量”只是 环境记录 这个特殊的内部对象的一个属性。“获取或修改变量”意味着“获取或修改环境记录的一个属性”。

词法环境的两种类型：

  • 全局环境（在全局执行上下文中）
    • 它拥有一个全局对象（window 对象）及其关联的方法和属性（例如数组方法）以及任何用户自定义的全局变量，this 的值指向这个全局对象。
    • 一个没有外部环境的词法环境。全局环境的外部环境引用为 **null**。
  • 函数环境（在函数执行上下文中）
    • 用户在函数中定义的变量被存储在环境记录中。
    • 对外部环境的引用可以是全局环境，也可以是包含内部函数的外部函数环境。

注意：  对于函数环境而言，环境记录 还包含了一个 arguments 对象，该对象包含了索引和传递给函数的参数之间的映射以及传递给函数的参数的长度（**length**）。

环境记录的两种类型

  • 对象环境记录 用于定义在全局执行上下文中出现的变量和函数的关联。
    • 全局环境包含对象环境记录。(Object)
  • 声明性环境记录 用于存储函数执行上下文中出现的变量、函数和参数（arguments）。
  • 函数环境包含声明性环境记录。(Declarative)

变量环境（Variable Environment）

它也是一个词法环境，其 EnvironmentRecord 包含了由 VariableStatements 在此执行上下文创建的绑定。

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

在 ES6 中，LexicalEnvironment 组件和 VariableEnvironment 组件的区别在于前者用于存储函数声明和变量（ **let** 和 **const** ）绑定，而后者仅用于存储变量（ **var** ）绑定。

例子

代码示例

  1. // 'use strict'
  2. let a = 20;  
  3. const b = 30;  
  4. var c;
  6. function multiply(e, f) {
  7.     var g = 20;  
  8.     return e * f * g;  
  9. }
  11. c = multiply(20, 30);

全局执行上下文

  1. GlobalExectionContext = { // 全局执行上下文
  3.     ThisBinding: <Global Object>, // this指向全局对象
  5.     LexicalEnvironment: { // 词法环境
  6.         EnvironmentRecord: { // 环境记录
  7.             Type: "Object", // 对象环境记录
  8.             // 标识符绑定在这里  
  9.             a: < uninitialized >, // 变量的未初始化状态（对应暂时性死区）
  10.             b: < uninitialized >, // 变量的未初始化状态（对应暂时性死区）
  11.             multiply: < func > // 即用型函数 不像let那样直到声明处才可用（对应函数提升）
  12.         },
  13.         outer: <null> // 无对外部环境的引用
  14.     },
  16.     VariableEnvironment: { // 变量环境
  17.         EnvironmentRecord: { // 环境记录
  18.             Type: "Object", // 对象环境记录
  19.             // 标识符绑定在这里  
  20.             c: undefined, // var变量 直接赋值 undefined（对应变量提升）
  21.         },
  22.         outer: <null>  // 无对外部环境的引用
  23.     }
  24. }

函数执行上下文

  1. FunctionExectionContext = { // 函数执行上下文
  3.     ThisBinding: <Global Object (or undefined)>, // this指向全局对象（考虑严格模式）
  5.     LexicalEnvironment: { // 词法环境
  6.         EnvironmentRecord: { // 环境记录
  7.             Type: "Declarative", // 声明性环境记录
  8.             // 标识符绑定在这里
  9.             Arguments: {0: 20, 1: 30, length: 2}, // 函数的 arguments 对象
  10.         },
  11.         outer: <GlobalLexicalEnvironment> // 对外部引用为 全局词法环境
  12.     },
  14.     VariableEnvironment: { // 变量环境
  15.         EnvironmentRecord: { // 环境记录
  16.             Type: "Declarative", // 声明性环境记录
  17.             // 标识符绑定在这里
  18.             g: undefined, // var变量 （对应变量提升）
  19.         },
  20.         outer: <GlobalLexicalEnvironment> // 对外部引用为 全局词法环境
  21.     }
  22. }

注意：  只有在遇到函数 multiply 的调用时才会创建函数执行上下文。

注意， let 和 const 定义的变量没有任何与之关联的值，但 var 定义的变量设置为 undefined。

这是因为在创建阶段，代码会被扫描并解析变量和函数声明，其中函数声明存储在环境中，而变量会被设置为 **undefined**（在 var 的情况下）或保持未初始化（在 let 和 const 的情况下）。

这就是为什么我们可以在声明之前访问 var 定义的变量（尽管是 undefined ），但如果在声明之前访问 let 和 const 定义的变量就会提示引用错误的原因。

这也就是所谓的变量提升。

执行阶段

执行变量赋值、代码执行。

回收阶段

执行上下文出栈，等待垃圾回收。

执行栈（Execution Stack）

函数多了，就有多个函数执行上下文，每次调用函数创建一个新的执行上下文，那如何管理创建的那么多执行上下文呢？

利用执行栈，在其他编程语言中也被叫做调用栈，具有 LIFO（后进先出）结构，用于存储在代码执行期间创建的所有执行上下文。

  • 当 JavaScript 引擎首次读取脚本时，它会创建一个全局执行上下文并将其推入当前的执行栈。
  • 每当发生一个函数调用，引擎都会为该函数创建一个新的执行上下文并将其推到当前执行栈的顶端。
  • 引擎会运行执行上下文在执行栈顶端的函数，当此函数运行完成后，其对应的执行上下文将会从执行栈中弹出并等待垃圾回收，上下文控制权将移到当前执行栈的下一个执行上下文。