JavaScript `AST`介绍

一、什么是`AST`？

AST全称为：Abstract Syntax Tree（即抽象语法树），也可简称为Syntax Tree（语法树）

AST是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

简单理解，AST就是源代码的树状结构表现

二、`AST`有什么用？

有了AST抽象语法树，我们就可以通过操纵这颗树，精准的定位到声明语句、赋值语句、运算语句等等，实现对代码的分析、语法分析、优化、变更等操作。

现在流行的 webpack，eslint 等很多插件或者包都涉及到AST。

AST的应用非常广泛，以下是部分例子：

IDE的错误提示、代码格式化、代码高亮、代码自动补全等
JSLint、JSHint对代码错误或风格的检查等
webpack、rollup进行代码打包等
CoffeeScript、TypeScript、JSX、babel等转化为原生Javascript

当然，其实它的用途，还远不止这些，如果你想自己实现一个React、Vue这样的框架，那就必须要知道AST。

而且，不仅仅只针对JavaScript，其实大部分的语言都会有抽象语法树的概念。无论是解释语言（JavaScript，Python，Ruby）还是一种编译语言（C#，Java，Rust），总会有一个共同的部分：将源代码作为纯文本解析为一个数据结构，这里的数据结构就是指AST。

如果能对AST有深入的理解，那么对于其它的语言的也可举一反三，学好AST永远不亏。

三、`AST`的生成过程？

现在的Web浏览器引擎大都使用C++编写AST处理功能，这也是JavaScrpt代码在大多数情况下能快速运行的原因。

AST的生成主要分为以下两个步骤：

分词：将整个代码字符串分割成最小语法单元数组
语法分析：在分词基础上建立分析语法单元之间的关系

语法单元

语法单元是被解析语法当中具备实际意义的最小单元，简单的来理解就是自然语言中的词语。

例如，下面这段话：

2019年是祖国70周年

我们可以把这句话拆分成最小单元，即：2019年、是、祖国、70、周年。

这就是我们所说的分词，也是最小单元，因为如果我们把它再拆分出去的话，那就没有什么实际意义了。

Javascript 代码中的语法单元主要包括以下这么几种：

关键字：例如 var、let、const等
标识符：没有被引号括起来的连续字符，可能是一个变量，也可能是 if、else 这些关键字，又或者是 true、false 这些内置常量
运算符： +、-、 *、/ 等
数字：像十六进制，十进制，八进制以及科学表达式等语法
字符串：因为对计算机而言，字符串的内容会参与计算或显示
空格：连续的空格，换行，缩进等
注释：行注释或块注释都是一个不可拆分的最小语法单元
其他：大括号、小括号、分号、冒号等

如果我们以最简单的复制语句为例的话，如下？

var sum = 1 + 2;

通过分词，我们可以得到如下结果：

[
    {
        "type": "Keyword",
        "value": "var"
    },
    {
        "type": "Identifier",
        "value": "sum"
    },
    {
        "type": "Punctuator",
        "value": "="
    },
    {
        "type": "Numeric",
        "value": "1"
    },
    {
        "type": "Punctuator",
        "value": "+"
    },
    {
        "type": "Numeric",
        "value": "2"
    },
    {
        "type": "Punctuator",
        "value": ";"
    }
]

在这个网站，可以很容易的为JavaScript生成分词：https://esprima.org/demo/parse.html#

语法分析

上面我们已经得到了我们分词的结果，需要将词汇进行一个立体的组合，确定词语之间的关系，确定词语最终的表达含义。

简而言之，语法分析是对语句和表达式识别，确定分词之间的关系，并能准确将之表达。

具体的语法分析过程会比较复杂，这里不详细作介绍，总之这一步骤的产物便是AST

通过这个网站可以很简单的得到代码的抽象语法树表示图：https://resources.jointjs.com/demos/javascript-ast，上面的var sum = 1 + 2;语句，其AST示意图如下：

上面的表示图省略了很多字段，以下是AST的详细内容：

{
  "type": "Program",
  "start": 0,
  "end": 16,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 16,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 4,
          "end": 15,
          "id": {
            "type": "Identifier",
            "start": 4,
            "end": 7,
            "name": "sum"
          },
          "init": {
            "type": "BinaryExpression",
            "start": 10,
            "end": 15,
            "left": {
              "type": "Literal",
              "start": 10,
              "end": 11,
              "value": 1,
              "raw": "1"
            },
            "operator": "+",
            "right": {
              "type": "Literal",
              "start": 14,
              "end": 15,
              "value": 2,
              "raw": "2"
            }
          }
        }
      ],
      "kind": "var"
    }
  ],
  "sourceType": "module"
}

四、`AST` 的使用？

相信大部分同学对 babel 这个库不陌生，现在的做前端模块化开发过程中中一定少不了它，因为它可以帮你将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

实际上呢，babel 中的很多功能都是靠修改 AST 实现的。

假如我们想实现一个功能：将 es6 中的 箭头函数 转换成 es5 中的 普通函数

转换前：

const sum = (a,b) => a+b;

转换后：

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

想想看，该如何实现呢？

JavaScript AST介绍（一）