JS抽象语法树（AST）详解|极客笔记

JS抽象语法树（AST）详解

什么是AST

JS抽象语法树（AST）是指将JavaScript代码转化为树状结构的一种数据表示方式。它可以将代码中的每个语法结构分解为一个个节点，通过节点之间的关系来表示代码的逻辑结构。AST可以帮助我们分析、理解和修改代码，是编译器、静态分析工具和代码编辑器等工具的基础。

编写和调试JavaScript代码时，我们通常是在文本编辑器中操作的，而计算机更擅长处理树状结构的数据。通过将JavaScript代码转换为AST，我们可以借助树形结构的特点，更加方便地进行代码分析和转换操作。

如何生成AST

将JavaScript代码转换为AST的过程称为解析（Parsing），它是编译器的第一阶段工作。在浏览器中，JavaScript的解析由JavaScript引擎负责，不同的引擎会有不同的解析器。

解析的过程可以分为两个阶段：词法分析（Lexical Analysis）和语法分析（语法 Analysis）。词法分析将代码分解为一个个词法单元（Token），如标识符、关键字、字符串常量等。语法分析则将词法单元按照语法规则组织成一个个语法结构。

在构建AST时，我们通常会使用现有的解析器库，如Esprima、Babel等。这些库可以帮助我们将JavaScript代码解析为AST，并提供了丰富的API用于操作AST节点。

下面是一个使用Esprima解析器将JavaScript代码转换为AST的示例：

const esprima = require('esprima');

const code = 'var a = 10;';
const ast = esprima.parseModule(code);

console.log(ast);

运行以上代码，可以得到如下的AST结构：

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "value": 10
          }
        }
      ],
      "kind": "var"
    }
  ],
  "sourceType": "module"
}

通过这种方式，我们可以将JavaScript代码转换为一种更加直观和易于操作的数据结构，进而进行后续的代码分析和转换。

AST的结构和节点类型

AST是一个由多个节点组成的树状结构，每个节点代表了代码中的一个语法结构或操作。不同的节点类型表示不同的语法结构，如变量声明、函数定义、赋值语句等。

每个AST节点都有一个类型（type）属性，用于标识节点的种类。在Esprima中，节点的类型可以是以下之一：

Program：表示整个程序的根节点；
VariableDeclaration：表示变量声明语句；
VariableDeclarator：表示变量声明中的一个声明符；
Identifier：表示标识符（变量名、函数名等）；
Literal：表示字面量，如数字、字符串等；
AssignmentExpression：表示赋值表达式；
FunctionDeclaration：表示函数声明；
CallExpression：表示函数调用；
…（还有很多其他类型）

每个节点都可能有不同的属性，用于存储相关信息。节点之间的关系通常由父子关系、兄弟关系来表达。

下面是一个AST结构的示例，用于表示一个简单的赋值语句：

{
  "type": "AssignmentExpression",
  "operator": "=",
  "left": {
    "type": "Identifier",
    "name": "a"
  },
  "right": {
    "type": "Literal",
    "value": 10
  }
}

在这个示例中，根节点为一个AssignmentExpression类型的节点，它表示赋值语句。该节点有3个属性：operator表示运算符（等号），left表示赋值的左侧，right表示赋值的右侧。left和right又分别是Identifier类型和Literal类型的节点。

通过使用不同的节点类型和属性，AST可以准确地表示代码的结构和含义，方便后续的操作和分析。

AST的应用

AST在编程领域有着广泛的应用，下面介绍一些常见的应用场景。

静态分析工具

静态分析工具可以分析代码的结构和规范，检测出潜在的问题和错误。AST可以作为静态分析工具的基础数据结构，通过遍历和分析AST节点，可以检测出语法错误、变量未声明、未使用的变量、不符合规范的函数调用等问题。

例如，我们可以使用AST检测出未使用的变量：

const esprima = require('esprima');

const code = `
  var a = 10;
  var b = 20;
  console.log(b);
`;

const ast = esprima.parseModule(code);

// 遍历所有的VariableDeclarator节点
ast.body.filter(node => node.type === 'VariableDeclaration')
        .forEach(node => {
          // 获取变量名
          const varName = node.declarations[0].id.name;

          // 判断变量是否被使用
          if (ast.body.find(n => n.type === 'Identifier' && n.name === varName)) {
            console.log(`变量 ${varName}被使用`); } else { console.log(`变量$ {varName}未使用`);
          }
        });

运行以上代码，可以得到输出：

变量a未使用
变量b被使用

代码转换工具

AST可以通过遍历、修改和重建节点的方式，对代码进行转换和优化。代码转换工具可以利用AST将代码从一种形式转换为另一种形式，以实现语法糖、性能优化、代码压缩等目的。

例如，我们可以使用AST将ES6的箭头函数转换为普通的函数定义：

const esprima = require('esprima');
const escodegen = require('escodegen');

const code = 'const double = (x) => x * 2;';
const ast = esprima.parseModule(code);

// 遍历所有的ArrowFunctionExpression节点
ast.body.filter(node => node.type === 'VariableDeclaration')
        .forEach(node => {
          // 将ArrowFunctionExpression节点转换为FunctionExpression节点
          node.declarations[0].init.type = 'FunctionExpression';
        });

// 重新生成代码
const transformedCode = escodegen.generate(ast);

console.log(transformedCode);

运行以上代码，可以得到输出：

const double = function (x) { return x * 2; };

通过上述代码转换，我们将箭头函数转换为了普通的函数定义方式，使其可以在不支持ES6的环境中运行。

代码生成工具

AST还可以用于生成代码。代码生成工具可以根据AST节点的结构和属性，生成与原始源代码等价的代码。

例如，我们可以使用AST生成一个简单的函数调用表达式：

const esprima = require('esprima');
const escodegen = require('escodegen');

const ast = {
  "type": "CallExpression",
  "callee": {
    "type": "Identifier",
    "name": "console.log"
  },
  "arguments": [
    {
      "type": "Literal",
      "value": "Hello, World!"
    }
  ]
};

// 生成代码
const code = escodegen.generate(ast);

console.log(code);

运行以上代码，可以得到输出：