AST抽象语法树

AST：抽象语法树

webpack、UglifyJs、lint等工具的核心都是通过ast抽象语法书实现的，实现对代码的检查、分析。底层是调用的js parser 来生成抽象语法树。

为什么需要抽象语法树？

编程语言太多，需要一套统一的结构让计算机识别

过程：

词法解析：词法解析代码的时候，是一个个字母读取，遇到空格、操作符或者特殊字符的时候，会认为一个话已经完成了读取代码，并且移除空白符、注释等，将整个代码分割进一个tokens列表（一维数组）。

语法解析：讲词法解析生成出来的tokens列表生成树形的表达形式，同时验证语法错误，语法错误就抛出错误。在生成树的过程中，解析器会删除一些没必要的tokens（比如不完整的括号）

如果要感受抽象语法树推荐一个node工具：

npm i recast --save

const recast = require("recast");

const code = `function add(a, b) {

    return a +

      // 有什么奇怪的东西混进来了

      b

  } `

const ast = recast.parse(code);

const add  = ast.program.body[0]

console.log(add)

输出结果

也可以对AST进行一些处理后输出

const recast = require("recast");

const {variableDeclaration, variableDeclarator, functionExpression} = recast.types.builders

const code = `

  function add(a, b) {

    return a +

      // 有什么奇怪的东西混进来了

      b

  }`

const ast = recast.parse(code);

const add  = ast.program.body[0]

ast.program.body[0] = variableDeclaration("const", [

  variableDeclarator(add.id, functionExpression(

    null, // Anonymize the function expression.

    add.params,

    add.body

  ))

]);

//将AST对象重新转回可以阅读的代码

const output = recast.print(ast).code;

console.log(output)

输出结果

安利两个网站能查看tokens和抽象语法树：

http://resources.jointjs.com/demos/javascript-ast

https://astexplorer.net/

相关文章：https://segmentfault.com/a/1190000016231512

相关文档：https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API#Node_objects