携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情
Class
class是ESNext的语法，babel中有专门的AST节点来表示。
ESNext指的是ES6及以后的JavaScript
以下面的代码为例：
class Asian extends Person{
hair = 'black';
constructor() {}
say() {}
}
整个class的内容是ClassBody，属性是ClassProperty，方法是ClassMethod（通过 kind 属性来区分是 constructor 还是 method）
结合我们前面学到的Declaration，可以写出上面代码对应的AST如下：
Moudles
import
| 语法名称 | 代码示例 | 节点名称 | specifiers属性 |
|---|---|---|---|
| named import | import {c, d} from 'c'; | ImportDeclaration | ImportSpicifier |
| default import | import a from 'a'; | ImportDeclaration | ImportDefaultSpecifier |
| namespaced import | import * as b from 'b'; | ImportDeclaration | ImportNamespaceSpcifier |
观察上面的代码示例，可以看出，import的整体结构是相同的，都是 import XXX from 'X' 这种结构，不同的地方就是XXX部分，XXX部分就是specifier部分，所以 import的AST结构是ImportDecalaration包含不同的import specifier。
export
| 语法名称 | 代码示例 | 节点名称 | specifiers属性 |
|---|---|---|---|
| named export | export {b, d}; | ExportDefaultDeclaration | / |
| default export | export default a; | ExportNamedDecaration | ExportSpecifier |
| all export | export * from 'c'; | ExportAllDeclaration | / |
Program & Directive
program代表的是整个程序的节点，它的body属性代表的是程序体，body属性的值是一个数组（statement数组），数组中存放的就是具体执行的语句的集合。
除了body属性之外，pro还有个directives 属性，存放 Directive 节点，比如"use strict" 这种指令会使用 Directive 节点表示。
Program 是包裹具体执行语句的节点，而 Directive 则是代码中的指令部分。
File & Comment
File是Babel的AST的最外层的节点，上面讲到的program就是它的属性，除此之外还有comments（注释）、tokens（token）等属性。
comment
注释分为块注释和行内注释，对应 CommentBlock 和 CommentLine 节点。
| 名称 | 代码 | 节点 |
|---|---|---|
| 块注释 | /*注释*/ | CommentBlock |
| 行内注释 | // 注释 | CommentLine |
上面就是一些 常见的AST 节点类型，babel 就是通过这些节点来抽象源码中不同的部分。
AST节点可视化
通过上面这个网站可以可视化的查看AST
