执行上下文和执行栈

本文是是在阅读 阅文前端团队翻译的文章的过程中的总结；

1、执行上下文的定义

当前 JavaScript 代码被解析和执行时所在环境；

2、执行上下文的类型

1. 全局执行上下文
2. 函数执行上下文
3. Eval 执行上下文

3、JavaScript 引擎如何管理执行上下文

用栈存储在代码执行期间创建的所有执行上下文；

类似于函数递归调用时的递归调用栈；

在 JavaScript 代码执行时，JS 引擎会先创建一个全局执行上下文，然后将其入栈，并继续执行 js 代码；当调用函数时，会为函数创建一个执行上下文 ，然后入栈，并执行函数里的代码；

4、JavaScript 如何创建执行上下文

执行上下文分为两个阶段创建：1）创建阶段；2）执行阶段；

创建阶段

1. 确定 this 的值，

   在全局执行上下文中，this 的值指向全局对象；

   在函数执行上下文中，this 的值取决于函数的调用方式；如果被一个对象引用，那么 this 的值被设置为该对象，否则被设置为全局对象或者 undefined(严格模式下)；

2. 词法环境（Lexical）组件被创建

   • 词法环境的定义

     一个包含标识符变量映射的结构；

   • 词法环境的组成

     • 环境记录：存储变量和函数声明的实际位置；分为 声明性环境记录 和 对象环境记录；

     • 对外部环境的引用：eg：全局环境的对外部环境的引用是null，嵌套的函数的对外部环境的引用是外部函数环境；

   • 词法环境的类型

     • 全局环境
     • 函数环境

3. 变量环境（Variable）组件被创建

   • 变量环境的定义

     也是一个词法环境，具有词法环境的所有属性；

   • 变量环境 与 词法环境的区别

     • 前者用于存储函数声明 和 变量（let和const）绑定；
     • 后者仅用于存储变量（var）的绑定；

注：

在创建阶段，代码会被扫描，并解析变量和函数声明，其中函数声明存储在环境中，而变量会被设置为 undefined(使用 var 声明) 和保持未初始化（使用 let 和 const 声明）

执行阶段

在此阶段完成对所有变量的分配，最后执行代码；

注：在执行阶段，如果 JavaScript 引擎在源代码中声明的实际位置找不到 let 声明变量的值，那么将其分配为 undefined 值；

参考：https://juejin.cn/post/6844903704466833421