JavaScript的AST抽象语法树

什么是AST抽象语法树

Wikipedia关于AST的解释：

It is a hierarchical program representation that presents source code structure according to the grammar of a programming language, each AST node corresponds to an item of a source code.

抽象语法树（abstract syntax tree 或者缩写为 AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。

Javascript的语法是为了给开发者更好的编程而设计的，但是不适合程序的理解。所以需要转化为AST来更适合程序分析，浏览器编译器一般会把源码转化为AST来进行进一步的分析等其他操作。

抽象语法树其实就是将一类标签转化成通用标识符，从而结构出的一个类似于树形结构的语法树。

AST的应用场景

webpack、rollup、UglifyJS、Lint等很多的工具和库的核心都是通过Abstract Syntax Tree 抽象语法树这个概念来实现对代码的检查、分析。

常见的几种用途：

1. 代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等
   1. 如JSLint、JSHint对代码错误或风格的检查，发现一些潜在的错误
   2. IDE的错误提示、格式化、高亮、自动补全等等
   3. 代码混淆压缩
   4. UglifyJS2等
2. 优化变更代码，改变代码结构使达到想要的结构
   1. 代码打包工具webpack、rollup等等
   2. CommonJS、AMD、CMD、UMD等代码规范之间的转化
   3. CoffeeScript、TypeScript、JSX等转化为原生Javascript

AST如何工作的

通过不同的parser解析js代码后得到AST

常见的JavaScript Parser有：

• esprima
• traceur
• acorn
• shift

这里也有个在线生成AST的Parser解析器： https://astexplorer.net/

扩展阅读：
https://github.com/jamiebuilds/the-super-tiny-compiler (编译器原理项目)
http://taobaofed.org/blog/2016/09/30/babel-plugins/
https://itnext.io/ast-for-javascript-developers-3e79aeb08343

Tagged as: ast, JavaScript, 原理