AST入门

什么是AST

抽象语法树：AST（Abstract Syntax Tree)，是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。树上的每个节点都表示源代码中的一种结构。之所以说语法是「抽象」的，是因为这里的语法并不会表示出真实语法中出现的每个细节。

token->AST->字节码

以下是一个简单的JavaScript代码片段的AST示例：

jsCopy

对应的AST如下所示：

Program
├── FunctionDeclaration (name: add)
│   ├── Identifier (name: a)
│   ├── Identifier (name: b)
│   └── BinaryExpression
│       ├── Identifier (name: a)
│       └── Identifier (name: b)
└── ExpressionStatement
    └── CallExpression
        ├── Identifier (name: console.log)
        └── Arguments
            ├── CallExpression
            │   ├── Identifier (name: add)
            │   ├── Literal (value: 1)
            │   └── Literal (value: 2)
            └── Empty

可以看到，AST中的每个节点都表示代码中的一个语法结构，例如Program表示整个程序，FunctionDeclaration表示函数声明，BinaryExpression表示二元表达式等等。节点之间的关系则表示了代码中的控制流、数据流等等。

生成AST

词法分析

语法分析

AST的应用

• 编辑器的错误提示、代码格式化、代码高亮、代码压缩、代码自动补全；

• elint、pretiier 对代码错误或风格的检查；

• webpack 通过 babel 转译 javascript 语法；

• babel应用

总结

AST是一种用于代码分析和转换的数据结构，它可以将源代码转换成一棵树状结构，使得代码的分析和修改更加方便。AST的生成通常分为词法分析和语法分析两个步骤，其中语法分析器通过递归下降算法来进行AST的生成。AST的应用非常广泛，包括代码检查、代码重构、代码转换等等。通过对AST的遍历和分析，我们可以实现很多有用的功能。

相关链接

• GoGoCode
• AST explorer

function add(a, b) {
  return a + b;
}

console.log(add(1, 2));