JavaScript的AST抽象语法树

by Web全栈工程师 on 2016 年 10 月 01 日

什么是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

Leave a Comment

Previous post:

Next post: