JavaScript 的编译与执行原理

---

前言

系统深入地讲解 JavaScript 的编译与执行原理，并结合作用域、闭包、作用域链等核心概念，构建一个完整的知识体系。

---

🧠 一、JavaScript 编译与执行过程

虽然 JavaScript 是解释型语言，但它在执行前仍然会经历编译阶段（由现代 JavaScript 引擎完成，如 V8）。整体过程如下：

1. 编译阶段（发生在代码执行前）

包括以下几步：

✅ 1.1 词法分析（Lexical Analysis）

• 将源代码拆解成词法单元（Token）。
• 例如：let a = 10; → let、a、=、10、;。
• 负责这一阶段的是词法分析器（Lexer）。

// 代码
let x = 10 + y;// 生成的tokens
[{ type: 'Keyword', value: 'let' },{ type: 'Identifier', value: 'x' },{ type: 'Punctuator', value: '=' },{ type: 'Numeric', value: '10' },{ type: 'Punctuator', value: '+' },{ type: 'Identifier', value: 'y' },{ type: 'Punctuator', value: ';' }
]

关联知识：
词法环境是 JavaScript 引擎内部用来管理变量和函数作用域的机制，它是理解作用域和闭包的核心概念。

词法环境的组成
一个词法环境包含两部分：

​​环境记录（Environment Record）​​：存储变量和函数声明的实际位置
​​对外部词法环境的引用（Outer Lexical Environment）​​：形成作用域链

// 示例代码
let x = 10;function foo() {let y = 20;console.log(x + y);
}// 对应的词法环境结构
globalLexicalEnvironment = {environmentRecord: { x: 10, foo: <function> },outer: null
}fooLexicalEnvironment = {environmentRecord: { y: 20 },outer: globalLexicalEnvironment
}

词法环境的特性
​​静态性​​：在代码编写阶段就已确定（词法作用域）
​​嵌套性​​：可以形成多层嵌套结构
​​持久性​​：被闭包引用的词法环境不会被销毁

✅ 1.2 语法分析（Parsing）

• 将 Token 转换为 抽象语法树（AST）。
• AST 是代码结构的树状表示，每个节点代表代码结构的一个成分。
• 语法分析器（Parser）处理这一步。

let x = 10 + y;
// 生成的AST结构
{type: "VariableDeclaration",kind: "let",declarations: [{type: "VariableDeclarator",id: { type: "Identifier", name: "x" },init: {type: "BinaryExpression",operator: "+",left: { type: "Literal", value: 10 },right: { type: "Identifier", name: "y" }}}]
}

✅ 1.3 语义分析与生成执行上下文

• 变量提升、作用域环境创建、函数声明处理。

• 此时创建：

  • 执行上下文栈（Execution Context Stack）
  • 词法环境（Lexical Environment）
  • 变量环境（Variable Environment）

---

🧰 二、执行阶段

编译完成后，进入代码执行：

✅ 2.1 创建执行上下文（Execution Context）

每个函数/全局代码执行时，会创建一个上下文环境：

• 包含：

  • 变量环境（变量/函数声明）
  • 词法环境（作用域）
  • this 绑定
  • 外部环境引用（outer）

✅ 2.2 变量环境 vs 词法环境

• 变量环境：

  • 存储变量、函数声明（var/函数声明）

• 词法环境（Lexical Environment）：

  • 变量环境 + 外部环境引用（outer）
  • 用于作用域链的构建。

---

🔁 三、作用域、作用域链与闭包

✅ 3.1 作用域（Scope）

• 定义变量和函数的可访问范围。

• 分为：

  • 全局作用域
  • 函数作用域
  • 块级作用域（let/const）

✅ 3.2 作用域链（Scope Chain）

• 当前执行上下文的词法环境中包含对上级词法环境的引用。
• 在查找变量时，从当前作用域出发，逐层向上查找，直到全局作用域。

function outer() {let a = 10;function inner() {console.log(a); // 通过作用域链访问 outer 的 a}inner();
}
outer();

✅ 3.3 闭包（Closure）

• 闭包是函数+定义它的词法环境的组合。
• 当一个函数“脱离”了它定义时的作用域，仍然“记住”当时的变量。

function makeCounter() {let count = 0;return function () {return ++count;}
}
const counter = makeCounter();
counter(); // 1
counter(); // 2

• count 保存在 makeCounter 的词法环境中，被返回的函数形成闭包访问它。

---

🔄 四、循环作用域与经典陷阱

✅ 4.1 for 循环中 var 的作用域陷阱

for (var i = 0; i < 3; i++) {setTimeout(() => {console.log(i); // 输出三个 3}, 0);
}

• 原因：var 没有块级作用域，i 绑定在同一个词法环境中。
• 修复方法：使用 let（创建新的词法环境）

for (let i = 0; i < 3; i++) {setTimeout(() => {console.log(i); // 输出 0 1 2}, 0);
}

---

🔍 五、执行上下文栈（ECS）

每当函数调用时，会创建新的执行上下文并压栈：

1. 创建全局执行上下文 → 入栈
2. 调用函数 → 创建函数执行上下文 → 入栈
3. 函数执行完毕 → 执行上下文出栈

---

🔐 六、总结：如何理解闭包与作用域链的结合

1. JavaScript 中函数定义时就“捕获”了其父级词法环境（静态作用域）。
2. 执行时，通过作用域链查找变量，先本地再向上查找。
3. 如果内部函数延迟执行（异步或返回），那么闭包可以“保持”对外部变量的访问。

---

📌 图示记忆（简化示意）

makeCounter() 创建执行上下文
└── 词法环境 {count = 0,outer = Global}返回的匿名函数 闭包：
└── 词法环境 {outer = makeCounter.LE}

---

总结

• ​​词法环境​​是 JavaScript 作用域管理的核心机制，具有静态性和嵌套性
• 循环中使用 let 会为每次迭代创建新的词法环境副本
• ​​词法分析​​和​​语法分析​​是编译的前期阶段，与运行时词法环境不同
• JavaScript 引擎通过这种机制实现块级作用域和闭包功能
• 理解这些概念有助于编写正确的作用域代码和调试复杂的作用域问题