1、什么是AST（抽象语法树）

抽象语法树是源代码语法结构的一种抽象表示。
它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

1.1、简单认识AST在线解析网站

AST在线解析网站(https://blogz.gitee.io/ast/)

如下图所示，左边是我们的源代码，右边是代码的树状结构

image.png

之后的讲解是使用babel库操作ast，所以需要选择@babel/parser
选择不同的库，源代码的树状结构也会有所不同，但差别不是太大

image.png

树结构节点名词解释：

1.type: 表示当前节点的类型，我们常用的类型判断方法t.is******(node),就是判断当前的节点是否为某个类型。
2.start: 表示当前节点的起始位。
3.end: 表示当前节点的末尾。
4.loc : 表示当前节点所在的行列位置，里面也有start与end节点，这里的start与上面的start是不同的，这里的start是表示节点所在起始的行列位。置，而end表示的是节点所在末尾的行列位置。
5.errors:是File节点所特有的属性，可以不用理会。
6.program:包含整个源代码，不包含注释节点。
7.comments:源代码中所有的注释会在这里显示。

2、AST语法树讲解

2.1实例

我们使用在线解析网站去拆解一个简单的add函数

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

打开网站后左边是原函数代码，右边是ast解析后的语法树

image.png

2.2讲解

参考https://blog.csdn.net/weixin_39408343/article/details/95984062

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

先将这个函数拆成了基本的三块：
一个id，就是它的名字，即add
两个params，就是它的参数，即[a, b]
一块body，也就是大括号内的一堆东西

image.png

add没办法继续拆下去了，它是一个最基础Identifier（标志）对象，用来作为函数的唯一标志，就像人的姓名一样。

image.png

params继续拆下去，其实是两个Identifier组成的数组。之后也没办法拆下去了。

image.png

body继续拆下去
body其实是一个BlockStatement（块状域）对象，用来表示是{return a + b}

image.png

打开Blockstatement，里面藏着一个ReturnStatement（Return域）对象，用来表示return a + b

image.png

继续打开ReturnStatement,里面是一个BinaryExpression(二进制表达式)对象，用来表示a + b

image.png

继续打开BinaryExpression，它成了三部分，left，operator，right
operator 即+
left 里面装的，是Identifier对象 a
right 里面装的，是Identifer对象 b

image.png

就这样，我们把一个简单的add函数拆解完毕，用图表示就是

image.png