抽象语法树（Abstract Syntax Tree，AST）

🌳 什么是 AST？

抽象语法树（AST）是源代码的结构化表示，它只保留代码的语法核心信息，忽略语法糖（如括号、换行等）或不影响语义的细节。
它是一棵树结构，每个节点代表代码中的一个结构单位：运算符、变量、函数、语句块等。

示例

2 + 3 * (4 - 1);

对应的 AST（简化表示）：

  +
 / \
2   *
   / \
  3   -
     / \
    4   1

每个内部节点表示一个操作符，叶子节点是字面量（如数字）。

🧩 AST 的典型用途

• 语法分析：将源代码转换成 AST
• 语义分析：检查类型或作用域错误
• 代码生成：把 AST 转换为机器码或字节码

JS 片段转 AST

执行顺序

• 读取 js 文件中的字符流
• 通过词法分析生成 token
• 通过语法分析( Parser )生成 AST
• 生成机器码执行

整个解析过程主要分为以下两个步骤：

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

JS Parser 是 js 语法解析器，它可以将 js 源码转成 AST，常见的 Parser 有 esprima、traceur、acorn、shift 等。

词法分析

• 词法分析，也称之为扫描（scanner），简单来说就是调用 next() 方法，一个一个字母的来读取字符，然后与定义好的 JavaScript 关键字符做比较，生成对应的 Token

例如 var 这三个字符，它只能作为一个整体，语义上不能再被分解，因此它是一个 Token。

• 词法分析器里，Token 包括 关键字 标识符 操作符 标点符 等
• 会过滤掉源程序中的注释和空白字符、换行符、空格、制表符等
• 最终，整个代码将被分割进一个 tokens 列表（或者说一维数组）。

语法分析

语法分析会将词法分析出来的 Token 转化成有语法含义的抽象语法树结构

示例 使用 babel/parser 转换代码

import parser from "@babel/parser";
const code = `const astFn = (a) => a + a`;

const ast = parser.parse(code, {
  sourceType: "module",
  plugins: ["jsx"],
});

转换结果

{
  "type": "File",
  "start": 0,
  "end": 26,
  "loc": {
    "start": {
      "line": 1,
      "column": 0,
      "index": 0
    },
    "end": {
      "line": 1,
      "column": 26,
      "index": 26
    }
  },
  "errors": [],
  "program": {
    "type": "Program",
    "start": 0,
    "end": 26,
    "loc": {
      "start": {
        "line": 1,
        "column": 0,
        "index": 0
      },
      "end": {
        "line": 1,
        "column": 26,
        "index": 26
      }
    },
    "sourceType": "module",
    "interpreter": null,
    "body": [
      {
        "type": "VariableDeclaration",
        "start": 0,
        "end": 26,
        "loc": {
          "start": {
            "line": 1,
            "column": 0,
            "index": 0
          },
          "end": {
            "line": 1,
            "column": 26,
            "index": 26
          }
        },
        "declarations": [
          {
            "type": "VariableDeclarator",
            "start": 6,
            "end": 26,
            "loc": {
              "start": {
                "line": 1,
                "column": 6,
                "index": 6
              },
              "end": {
                "line": 1,
                "column": 26,
                "index": 26
              }
            },
            "id": {
              "type": "Identifier",
              "start": 6,
              "end": 11,
              "loc": {
                "start": {
                  "line": 1,
                  "column": 6,
                  "index": 6
                },
                "end": {
                  "line": 1,
                  "column": 11,
                  "index": 11
                },
                "identifierName": "astFn"
              },
              "name": "astFn"
            },
            "init": {
              "type": "ArrowFunctionExpression",
              "start": 14,
              "end": 26,
              "loc": {
                "start": {
                  "line": 1,
                  "column": 14,
                  "index": 14
                },
                "end": {
                  "line": 1,
                  "column": 26,
                  "index": 26
                }
              },
              "id": null,
              "generator": false,
              "async": false,
              "params": [
                {
                  "type": "Identifier",
                  "start": 15,
                  "end": 16,
                  "loc": {
                    "start": {
                      "line": 1,
                      "column": 15,
                      "index": 15
                    },
                    "end": {
                      "line": 1,
                      "column": 16,
                      "index": 16
                    },
                    "identifierName": "a"
                  },
                  "name": "a"
                }
              ],
              "body": {
                "type": "BinaryExpression",
                "start": 21,
                "end": 26,
                "loc": {
                  "start": {
                    "line": 1,
                    "column": 21,
                    "index": 21
                  },
                  "end": {
                    "line": 1,
                    "column": 26,
                    "index": 26
                  }
                },
                "left": {
                  "type": "Identifier",
                  "start": 21,
                  "end": 22,
                  "loc": {
                    "start": {
                      "line": 1,
                      "column": 21,
                      "index": 21
                    },
                    "end": {
                      "line": 1,
                      "column": 22,
                      "index": 22
                    },
                    "identifierName": "a"
                  },
                  "name": "a"
                },
                "operator": "+",
                "right": {
                  "type": "Identifier",
                  "start": 25,
                  "end": 26,
                  "loc": {
                    "start": {
                      "line": 1,
                      "column": 25,
                      "index": 25
                    },
                    "end": {
                      "line": 1,
                      "column": 26,
                      "index": 26
                    },
                    "identifierName": "a"
                  },
                  "name": "a"
                }
              }
            }
          }
        ],
        "kind": "const"
      }
    ],
    "directives": [],
    "extra": {
      "topLevelAwait": false
    }
  },
  "comments": []
}

实战 写一个 二则运算的 AST

1. 完成一个最简易的 AST 函数

const BinaryOp = {
  ADD: "+",
  SUB: "-",
  MUL: "*",
  DIV: "/",
};

class AstTree {
  /**
   * @type {AstTree | number}
   */
  left = null;
  /**
   * @type {AstTree | number}
   */
  right = null;
  /**
   * @type {keyof BinaryOp}
   */
  binaryOp = null;
  constructor(left, right, binaryOp) {
    this.left = left;
    this.right = right;
    this.binaryOp = binaryOp;
  }
}

const ast1 = new AstTree(
  new AstTree(1, 2, BinaryOp.ADD),
  new AstTree(3, 4, BinaryOp.DIV),
  BinaryOp.MUL
);

const ast2 = new AstTree(
  new AstTree(5, 6, BinaryOp.SUB),
  new AstTree(7, 8, BinaryOp.MUL),
  BinaryOp.ADD
);

const ast3 = new AstTree(ast1, ast2, BinaryOp.DIV);

console.log(ast3);

输出

{
  "left": {
    "left": {
      "left": 1,
      "right": 2,
      "binaryOp": "+"
    },
    "right": {
      "left": 3,
      "right": 4,
      "binaryOp": "/"
    },
    "binaryOp": "*"
  },
  "right": {
    "left": {
      "left": 5,
      "right": 6,
      "binaryOp": "-"
    },
    "right": {
      "left": 7,
      "right": 8,
      "binaryOp": "*"
    },
    "binaryOp": "+"
  },
  "binaryOp": "/"
}

2. 输出 HTML

/**
 * @param {AstTree | number} ast
 * @returns {HTMLElement}
 */
function buildTreeElement(ast) {
  if (typeof ast === "number") {
    const node = document.createElement("div");
    node.className = "node";
    node.innerHTML = `<div class="value">${ast}</div>`;
    return node;
  } else {
    const node = document.createElement("div");
    node.className = "node";

    const value = document.createElement("div");
    value.className = "value";
    value.textContent = ast.binaryOp;

    const children = document.createElement("div");
    children.className = "children";

    const left = buildTreeElement(ast.left);
    const right = buildTreeElement(ast.right);

    // 记录父子节点的 DOM 对象
    nodeLinks.push([value, left.querySelector(".value")]);
    nodeLinks.push([value, right.querySelector(".value")]);

    children.appendChild(left);
    children.appendChild(right);

    node.appendChild(value);
    node.appendChild(children);

    return node;
  }

  const container = document.querySelector(".tree");
  const root = buildTreeElement(ast3);
  container.appendChild(root);
}

3. 节点之间连线

function drawLines(svg) {
  const svgBox = svg.getBoundingClientRect();

  for (const [parentEl, childEl] of nodeLinks) {
    const parentBox = parentEl.getBoundingClientRect();
    const childBox = childEl.getBoundingClientRect();

    const x1 = parentBox.left + parentBox.width / 2 - svgBox.left;
    const y1 = parentBox.bottom - svgBox.top;
    const x2 = childBox.left + childBox.width / 2 - svgBox.left;
    const y2 = childBox.top - svgBox.top;

    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
    line.setAttribute("x1", x1);
    line.setAttribute("y1", y1);
    line.setAttribute("x2", x2);
    line.setAttribute("y2", y2);
    svg.appendChild(line);
  }
}

const root = buildTreeElement(ast3);
container.appendChild(root);

setTimeout(() => {
  drawLines(container.querySelector("svg.connector"));
});

4. 动态生成内容

完整项目
线上查看地址