JavaScript执行前需经语法解析生成抽象语法树（AST）。首先词法分析将代码拆分为Token，如let、标识符、操作符等；接着语法分析依据语法规则将Token流构建成树形结构AST，例如let x = 10 + 5;被转化为包含变量声明与二元表达式的树。AST去除语法噪音，保留逻辑结构，用于代码校验、转换（如Babel）、压缩（如UglifyJS）及引擎优化（如V8生成字节码）。可通过AST Explorer或@babel/parser查看AST，是理解语言本质与工具链的关键步骤。
JavaScript代码在执行前会经历多个处理阶段，其中最关键的一环是语法解析，也就是将源代码转换为一种结构化的表示形式——抽象语法树（Abstract Syntax Tree, AST）。这个过程由JavaScript引擎（如V8、SpiderMonkey等）完成，是编译和优化的基础。
词法分析：将代码拆分为令牌（Token）
解析的第一步是词法分析（Lexical Analysis），也叫分词。引擎读取原始代码字符串，按语法规则将其切分成一个个有意义的单元，称为“令牌”（Token）。
例如，对于这行代码：
let x = 10 + 5;会被分解为如下 Token 序列：
立即学习“Java免费学习笔记（深入）”；
-
let（关键字） -
x（标识符） -
=（赋值操作符） -
10（数字字面量） -
+（加法操作符） -
5（数字字面量） -
;（语句结束符）
这个过程由词法分析器（Lexer 或 Scanner）完成，它识别空白、注释并跳过它们，只保留语法上有意义的部分。
语法分析：从 Token 构建抽象语法树
第二步是语法分析（Syntax Analysis），又叫解析（Parsing）。这一步将线性排列的 Token 流按照 JavaScript 的语法规则组织成一棵树形结构——AST。
解析器会根据语法规则（通常是基于ECMAScript规范的上下文无关文法）判断 Token 是否构成合法的语句或表达式。如果不符合语法规则，就会抛出 SyntaxError。
继续以上面的代码为例：
其对应的 AST 大致结构如下（简化表示）：
{
type: "Program",
body: [
{
type: "VariableDeclaration",
kind: "let",
declarations: [
{
type: "VariableDeclarator",
id: { type: "Identifier", name: "x" },
init: {
type: "BinaryExpression",
operator: "+",
left: { type: "Literal", value: 10 },
right: { type: "Literal", value: 5 }
}
}
]
}
]
}
这棵树清晰地表达了代码的结构：一个程序包含一条变量声明语句，声明了一个名为 x 的变量，其初始值是一个加法表达式。
AST的作用与后续处理
AST 是 JavaScript 引擎进一步处理代码的基础。它去除了原始代码中的语法噪音（如空格、换行、括号等），仅保留逻辑结构，便于后续操作。
常见用途包括：
- 代码校验：检查变量使用是否合法、作用域是否正确。
- 代码转换：Babel 等工具通过修改 AST 实现 ES6+ 到 ES5 的降级。
- 代码压缩：UglifyJS 等工具基于 AST 进行变量重命名、死代码消除。
- 生成字节码或机器码：V8 引擎将 AST 转换为字节码（Ignition）再优化为机器码（TurboFan）。
实际查看 AST 的方式
可以使用在线工具 AST Explorer 输入 JavaScript 代码，实时查看其生成的 AST 结构。这对理解语法结构和开发工具插件非常有帮助。
也可以使用 Node.js 模块如 @babel/parser 手动生成 AST：
const code = 'let x = 10 + 5;';
const ast = parser.parse(code);
console.log(ast);
基本上就这些。AST 构建是 JavaScript 执行流程中承上启下的关键步骤，理解它有助于深入掌握语言本质和工具链工作原理。不复杂但容易忽略。
