JavaScript中AST详解

什么是AST

在了解AST之前首先需要知道javascript的工作原理，javascript是一种解释型语言，通过词法分析语法分析之后构建出抽象语法树。如果javascript解析器无法构建出语法树时就会报出语法错误，从而结束此次编译过程（平时遇到语法错误提示时，就是此阶段报的错误）。整个javascript引擎工作流程可以，看以下的流程图。

javascript工作流程图.jpeg

从图片中就可以看到，第二个阶段就是形成AST(abstract syntax code)的过程，存在传统语言变成可执行代码之前都会经历以下三个阶段：
1.词法分析词法分析是将字符流(char stream)转换为记号流(token stream)，就像英文句子一个个单词独立翻译，举例：
代码：var result = testNum1 - testNum2;
词法分析后：
NAME "result"
EQUALS
NAME "testNum1"
MINUS
NAME "testNum2"
SEMICOLON
这个过程会将由字符组成的字符串分解成有意义的代码块,这些代码块统称为token.举个例子: let a = 1, 这段程序通常会被分解成为下面这些词法单元: let 、a、=、1、；空格是否被当成此法单元，取决于空格在这门语言中的意义。
2.语法分析，将token stream转换成一个由元素嵌套所组成的代表了程序语法结
构的树，这个树就是抽象语法树(AST)
3.将抽象语法树(AST) 转化成可执行代码

AST的结构

这里用到一个很好用的在线JavaScript解析器Esprima
例如

// Life, Universe, and Everythingfu
function add(a,b){
return a+b;
}

转化成AST的结构如下

{
  "type": "Program",
  "body": [
    {
      "type": "FunctionDeclaration",
      "id": {
        "type": "Identifier",
        "name": "add"
      },
      "params": [
        {
          "type": "Identifier",
          "name": "a"
        },
        {
          "type": "Identifier",
          "name": "b"
        }
      ],
      "body": {
        "type": "BlockStatement",
        "body": [
          {
            "type": "ReturnStatement",
            "argument": {
              "type": "BinaryExpression",
              "operator": "+",
              "left": {
                "type": "Identifier",
                "name": "a"
              },
              "right": {
                "type": "Identifier",
                "name": "b"
              }
            }
          }
        ]
      },
      "generator": false,
      "expression": false,
      "async": false
    }
  ],
  "sourceType": "script"
}

如果想要了解更多的AST对象的api，可以参考这里

AST的作用

AST的作用不仅仅是用来在JavaScript引擎的编译上，我们在实际的开发过程中也是经常使用的，比如我们常用的babel插件将 ES6转化成ES5、使用 UglifyJS来压缩代码、css预处理器、开发WebPack插件、Vue-cli前端自动化工具等等，这些底层原理都是基于AST来实现的，AST能力十分强大，能够帮助开发者理解JavaScript这门语言的精髓。
我们可以直接使用三方库来生成AST，这里推荐两个库，一个是recast，一个是babel用到的Babylon。这里推荐babel插件手册去实际体验转换js代码的过程

recast的使用

这里我们来实际使用第三方的parser库recast，来深入了解一下生成js代码的过程，我们完成一个需求,将代码

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

转换成es6的形式

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

下面是实现的代码：

import * as recast from "recast"

const code = [
  "function add(a, b) {",
  "  return a + b ;",
  "}"
].join("\n")
 
const ast = recast.parse(code)

const add = ast.program.body[0]

const n = recast.types.namedTypes

n.FunctionDeclaration.assert(add)
 
const b = recast.types.builders
 
ast.program.body[0] = b.variableDeclaration("var", [
  b.variableDeclarator(add.id, b.functionExpression(
    null,
    add.params,
    add.body
  ))
])
 
add.params.push(add.params.shift())

const output = recast.print(ast).code

console.log(output)

输出内容如下：

[oh-my-zsh]
[ttq]% node parse.mjs
var add = function(b, a) {
return a + b ;
};

以上AST也就介绍到这里了，如果想更深入了解，这里去babel插件手册上去开发一两个插件试一下。

参考连接

AST详解与应用
recast的官方手册
编程语言的实现，从AST（抽象语法树）开始
Parser API
babel插件手册
理解JavaScript的编译过程与运行机制
jsflowchart