深入理解 JavaScript 执行上下文

什么是JavaScript执行上下文

概念：JavaScript中，在执行任何代码之前，JavaScript引擎会先创建一个执行上下文（global execution context）。它包含有关当前代码正在执行的环境信息，是当前代码执行的基础。

JavaScript执行上下文的分类

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

全局执行上下文

• 概念：当JavaScript代码首次执行时，它会创建一个全局执行上下文（Global Execution Context）。这个全局执行上下文包含了全局对象（在浏览器中是window对象，在Node.js中是global对象），以及其他全局变量和函数。
• 变量定义： 在全局执行上下文中，你可以定义变量和函数。这些变量和函数将成为全局对象（如window或global）的属性。
• this指向： 在全局执行上下文中，this关键字指向全局对象。

函数执行上下文

• 概念：每当一个函数被调用时，JavaScript引擎会创建一个新的函数执行上下文（Function Execution Context）。每个函数调用都会创建自己的执行上下文，这些执行上下文被存储在调用栈（Call Stack）中。
• 函数执行上下文的生命周期包括三个阶段：创建阶段→执行阶段→回收阶段
  • 第一步：创建阶段
    • 创建变量对象（Variable Object, VO）：在函数执行上下文中，VO包含了函数的参数、内部变量和函数声明的属性。首先初始化函数的参数 arguments，提升函数声明和变量声明。在ES6及以后，引入了词法环境（Lexical Environment）来替代VO。
    • 创建作用域链（Scope Chain）：作用域链是一个对象列表，它决定了变量和函数的查找顺序。作用域链首先包含自己的变量对象，然后是上层（父级）的执行上下文中的变量对象。
    • 确定this的值：根据调用方式（如普通调用、方法调用、构造函数调用等）来确定this的指向。
    • 解析代码：在一段 JS 脚本执行之前，要先解析代码（所以说 JS 是解释执行的脚本语言），解析的时候会先创建一个全局执行上下文环境，先把代码中即将执行的变量、函数声明都拿出来。变量先暂时赋值为 undefined，函数则先声明好可使用。这一步做完了，然后再开始正式执行程序。
  • 第二步：执行阶段
    执行变量赋值、代码执行
  • 第三步：回收阶段
    执行上下文出栈等待垃圾回收机制回收执行上下文

eval执行上下文

• 概念：eval执行上下文是在eval函数中创建的执行上下文

JavaScript管理执行上下文的方式：执行上下文栈

在JavaScript代码中可能有很多函数，每次函数调用都会创建一个新的执行上下文，如何同时管理多个函数执行上下文呢？

在JavaScript引擎中，通过创建执行上下文栈来管理执行上下文。可以把它理解为一个存储函数调用的栈结构，遵循栈的先进后出的原则。
简单理解这个过程：

1. 全局执行上下文入栈：JavaScript执行在单线程上，所有的代码都是排队执行的。一开始浏览器执行全局代码时，首先创建全局执行上下文，并压入执行栈顶部。
2. 函数执行上下文入栈：每当进入一个函数的执行就会创建函数的执行上下文，并且把它压缩执行栈顶部。
3. js引擎访问栈中的执行上下文：浏览器的js执行引擎总是访问栈顶的执行上下文。
4. 函数执行上下文之后出栈：当前函数执行完成后，当前函数的执行上下文出栈，并等待垃圾回收机制回收

注意：全局上下文只有一个，并全局执行环境被销毁时，比如在浏览器关闭时出栈