JS 执行过程：执行上下文、词法环境

执行上下文（Execution Contexts）

执行上下文（Execution Contexts）：是一种规范设备，用于跟踪ECMAScript实现对代码的运行时评估 —— JavaScript 代码都需要运行在相应的“执行上下文”中

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

1. 全局执行上下文：基础的上下文，任何不在函数内部的代码都在其中。

   它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。

   • 程序首次允许时创建 —— 一个程序中只会有一个全局执行上下文。
2. 函数执行上下文：函数内部的代码所在的上下文。
   • 每次函数被调用都会创建一个新的执行上下文 —— 同一函数的多次执行，会多个上下文
3. eval执行上下文：eval() 内部的代码所在的执行上下文
   • 使用“eval方法”时创建

在任何时间点，最多有一个“执行上下文”在实际执行代码，这被称为“正在运行的执行上下文”（running execution context）。

执行上下文栈

执行上下文栈（Execution context stack，ECS）：又称“调用栈 / 执行栈”（call stack），用于跟踪“执行上下文” —— “正在运行的执行上下文”就是这个其的栈顶元素

函数的“执行过程”就是：对应的“执行上下文”（栈帧）在“调用栈”中的“入栈”（开始执行）、“出栈”（执行完毕）操作。

示例：

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

状态组件（State Components）

执行上下文的状态组件

组件（Component）	用途（Purpose）
“所有执行上下文”的状态组件
代码评估状态（code evaluation state）	对“与执行上下文关联的代码的执行、挂起和恢复”进行评估所需的任何状态。
函数（Function）	如果这个执行上下文正在评估函数对象的代码，那么这个组件的值就是那个函数对象。如果上下文正在评估脚本或模块的代码，则该值为null。 “正在运行的执行上下文（running execution context）”的 Function 组件的值也被称为“活动函数对象（active function object）”
领域（Realm）	“关联代码”访问“ECMAScript 资源”的领域 “正在运行的执行上下文（running execution context）”的 Realm 组件的值也被称为“当前 Realm（current Realm）”。
“ECMAScript代码执行上下文”的附加状态组件
词法环境（LexicalEnvironment）	标识“词法环境”，用于解析代码在此执行上下文中造成的标识符引用。
变量环境（VariableEnvironment）	标识“词法环境”，其 EnvironmentRecord 保存由 VariableStatements 在此执行上下文中创建的绑定。
“生成器执行上下文”的附加状态组件
词法环境（LexicalEnvironment）	标识“词法环境”，用于解析代码在此执行上下文中造成的标识符引用。

执行上下文的 LexicalEnvironment 和 VariableEnvironment 组件始终是“词法环境（Lexical Environments）”。

创建执行上下文时，其 LexicalEnvironment 和 VariableEnvironment 组件最初具有相同的值。

生命周期

可以分为 2 个主要阶段：

1. 创建阶段（Creation Phase）：（“预编译阶段”）JavaScript 引擎会做以下几件事情：
   1. 创建“词法环境（Lexical Environment）”组件
   2. 创建“变量环境（Variable Environment）”组件
2. 执行阶段（Code Execution Phase）：（“执行阶段”）JavaScript 引擎会按照代码的顺序逐行执行，并且根据需要更新变量和函数的值
   • 在执行阶段，如果 JavaScript 引擎不能在源码中声明的实际位置找到 let 变量的值，它会被赋值为 undefined。

词法环境（Lexical Environment）

词法环境（Lexical Environment）：是一种规范类型，基于 ECMAScript 代码的“词法嵌套结构”来定义“标识符”和具体“变量 / 函数”的关联

—— 标识符：变量 / 函数的名字
—— 标识符：对“原始数据”或“实际对象”（包含函数类型对象）的引用


⭐ 即：词法环境，是一种持有“标识符-变量”映射的结构

类型：

1. 全局环境（global environment）：是一个没有外部环境的词汇环境（“外部词法环境引用”为 null）。
   • 全局环境的 EnvironmentRecord 可以预先填充标识符绑定，并包含关联的“全局对象”，该对象的属性提供了一些全局环境的标识符绑定；
   • 这个“全局对象”是全局环境的 This 绑定的值；
   • 在执行 ECMAScript 代码时，可以向“全局对象”添加其他属性，并修改初始属性；
2. 模块环境（module environment）：是一个包含模块的顶级声明的绑定的词法环境。
   • 它还包含由模块显式导入的绑定；
   • 其“外部词法环境引用”是一个“全局环境”；
3. 函数环境（function environment）：是一个“对应于ECMAScript函数对象的调用”的词汇环境。
   • 它可以建立一个新的 this 绑定；
   • 它还将捕获支持 super 方法调用所需的状态；

词法环境，由一个“环境记录（Environment Record）”和一个“（可能为空值的）外部词法环境引用（Outer Lexical Environment）”和“This 绑定（This Binding）”组成。

其伪代码如下：

// 全局执行上下文
GlobalExectionContext = {
    // 词法环境
    LexicalEnvironment: {
        EnvironmentRecord: {
            Type: "Object",     // 环境记录: "对象式环境记录"
            // 在这里绑定标识符
        },
        outer: <null>,           // 外部词法环境引用: null
        this: <global object>    // this 绑定: "全局对象"
    }
}

// 函数执行上下文
FunctionExectionContext = {
    // 词法环境
    LexicalEnvironment: {
        EnvironmentRecord: {
            Type: "Declarative",    // 环境记录: "声明式环境记录"
            // 在这里绑定标识符
        },
        outer: <Global or outer function environment reference>,    // 外部词法环境引用: 外部"词法环境"
        this: <depends on how function is called>   // this 绑定: 取决于函数调用方式
    }
}

通常，词汇环境与 ECMAScript 代码的某些特定语法结构相关联，如 FunctionDeclaration、BlockStatement、Try 语句的 Catch 子句，每次评估此类代码时都会创建一个新的词汇环境。

环境记录（Environment Record）

环境记录（Environment Record）：记录在其关联的“词汇环境”的范围内创建的“标识符”绑定 —— 任何在“环境记录”中的标识符都可以在当前“词法环境”直接以标识符形式访问

两种主要的“环境记录”：

1. 声明式环境记录（Declarative Environment Record）：
2. 对象式环境记录（Object Environment Record）：
3. 全局环境记录（Global Environment Record）：对一个“对象式环境记录”组件和一个“声明式环境记录”组件的封装

外部词法环境引用（Outer Lexical Environment）

外部词法环境引用（Outer Lexical Environment）：用于对词法环境值的“逻辑嵌套”进行建模 —— 意味着通过它可以访问其“外部词法环境”

如果在当前的“词法环境”中找不到变量，JavaScript 引擎可以在外部环境中查找这些变量：

• （内部）词汇环境的外部引用是指在逻辑上围绕内部词汇环境的词汇环境
• 外部词汇环境可能有自己的外部词汇环境
• 一个词汇环境可以作为多个内部词汇环境的外部环境。

待待待待待待待待待待待待待待

This 绑定（This Binding）

⭐ This Binding：

1. 在“全局执行上下文”中：this 的值指向“全局对象”
   • 浏览器中，“全局对象”即 Window 对象
2. 在“函数执行上下文”中：this 的值取决于函数调用方式：
   1. 若函数被一个引用对象调用，this 将指向对象，
   2. 否则，this 的值被设置为“全局对象”（非严格模式）或者 undefined（严格模式）

参考

ECMAScript

 以下内容来自：《ECMAScript® 2015 Language Specification》的 《Executable Code and Execution Contexts》

网络文章

1. 《[译] 理解 JavaScript 中的执行上下文和执行栈》
2. 《你真的了解执行上下文吗？》