AST (Abstract Syntax Tree)

AST 定义

• AST(Abstract Syntax Tree)形象语法树，简称AST，它是源代码(也就是说它不仅仅是利用于JavaScript，同时还利用于其余语言，例如: Python，Rust等)语法结构的一种形象示意。
• 它以树状的模式体现编程语言的语法结构，树上的每个节点都示意源码中的一种构造。
• 语法【形象】: 指的是这里的语法并不会示意出实在语法中呈现的每个细节。

AST应用形式

• 咱们常见的词法分析器以及语法解析器(它能够将JavaScript源码转换成AST)，比方上面实例中的esprima，当然还有其余的，例如: acorn、shift、traceur等

用处

• AST 形象语法树的用处是十分宽泛的，比方:
• vscode、atom、sublime中的代码高亮、代码格式化、谬误提醒、代码主动补全；
• eslint、prettier对代码谬误或者格调的查看；
• babel转译ES6到ES5
  …
• 所以说如果你想优化JavaScript的编译和运行速度，AST的理解是必不可少的。

AST原理

编译流程

• JavaScript执行的过程首先是读取JavaScript文件中的字符流，其次通过词法分析器生成token，之后再通过语法分析器(Parser)生成AST树，最初转换为机器码执行。

var name = "jackdan";

• 第一步就先读取下面的字符流'var name = "jackdan"'；
• 第二步分词: 将'var name = "jackdan"'整个代码字符串宰割成最小的语法单元数组；如下:

[
  { type: 'Keyword', value: 'var' },
  { type: 'Identifier', value: 'name' },
  { type: 'Punctuator', value: '=' },
  { type: 'String', value: '"jackdan"' }
]

• 第三步语法分析: 在分词的根底上建设剖析语法单元之间的关系；如下:

- Program
  type: "Program"
  - body: [
    - VariableDeclaration {
      type: "VariableDeclaration"
      - declarations: [
        - VariableDeclarator {
          type: "VariableDeclarator"
          - id: Identifier {
            type: "Identifier"
            name: "name"
          }
          - init: Literal {
            type: "Literal"
            value: "jackdan"
            raw: "jackdan"
          }
        }
      ]
      kind: "var"
    }
  ]

• 咱们重点梳理一下原理中的词法剖析和语法分析，接触过这两者的应该不会太过于生疏。

词法剖析

• 词法剖析：同时也称为扫描(scanner)，简略来说就是调用
  next()办法，一个一个字母的来读取字符，而后与定义好的JavaScript要害字符做比拟，生成对应的Token。Token是一个不可分割的最小单元。例如:

var name = "jackdan";
// 先读取v，而后持续读取a,最初读取r组成一个var
// var这三个字符就辨认为JavaScript中的关键字，作为一个整体，语义上就不能再被合成了，因而咱们也视为一个Token

• 从下面的代码实例中不难得出，词法分析器里，每个关键字是一个Token，每个标识符是一个Token，每个操作符是一个Token，每个标点符号也都是一个Token。除此之外，还会过滤掉程序中的正文和空白字符（换行符、空格、制表符等）。
• 最终，咱们看到整个代码都被宰割进了一个tokens列表（或者说一维数组）。

[
  { type: 'Keyword', value: 'var' },
  { type: 'Identifier', value: 'name' },
  { type: 'Punctuator', value: '=' },
  { type: 'String', value: '"jackdan"' }
]

语法分析

• 语法分析就是将词法剖析的tokns列表转化成有语法含意的形象语法树结构。同时去验证语法(高亮、主动补全等)，语法如果有错的话，抛出语法错误。

- Program
  type: "Program"
  - body: [
    - VariableDeclaration {
      type: "VariableDeclaration"
      - declarations: [
        - VariableDeclarator {
          type: "VariableDeclarator"
          - id: Identifier {
            type: "Identifier"
            name: "name"
          }
          - init: Literal {
            type: "Literal"
            value: "jackdan"
            raw: "jackdan"
          }
        }
      ]
      kind: "var"
    }
  ]

AST 实例

// 源代码
var name = "jackdan";

// AST 形象语法树
/**
 * 
 *      +-----------+
 *      | assign(=) |
 *      +-----------+
 *      /            \
 *     /              \
 * +----+        +---------+
 * |name|        |"jackdan"|
 * +----+        +---------+
 * 
*/

// 运行输入的构造代码
- Program
  type: "Program"
  - body: [
    - VariableDeclaration {
      type: "VariableDeclaration"
      - declarations: [
        - VariableDeclarator {
          type: "VariableDeclarator"
          - id: Identifier {
            type: "Identifier"
            name: "name"
          }
          - init: Literal {
            type: "Literal"
            value: "jackdan"
            raw: "jackdan"
          }
        }
      ]
      kind: "var"
    }
  ]

> var esprima = require('esprima');
> var program = 'var name = "jackdan"';

> esprima.tokenize(program);
[
  { type: 'Keyword', value: 'var' },
  { type: 'Identifier', value: 'name' },
  { type: 'Punctuator', value: '=' },
  { type: 'String', value: '"jackdan"' }
]

> esprima.parse(program);
Script {
  type: 'Program',
  body: [
    VariableDeclaration {
      type: 'VariableDeclaration',
      declarations: [Array],
      kind: 'var'
    }
  ],
  sourceType: 'script'
}

Thinking in JackDan