抽象语法树 -Abstract Syntax Tree

已于 2022-07-06 19:33:19 修改
阅读量3.9k 收藏 4
点赞数 2
文章标签： javascript 前端 vue.js
于 2022-07-06 19:21:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/obj_obj_baby/article/details/125646236
版权

什么是抽象语法树？

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

拆分成语法树

拆解一个简单的add函数

function add(a, b) {
    return a + b
}

首先，我们拿到的这个语法块，是一个FunctionDeclaration(函数定义)对象。

拆分成了三块：

  • 一个id，就是它的名字，即add

  • 两个params，就是它的参数，即[a, b]

  • 一块body，也就是大括号内的一堆东西

    我们发现，body其实是一个BlockStatement（块状域）对象，用来表示是{return a + b}

    打开Blockstatement，里面藏着一个ReturnStatement（Return域）对象，用来表示return a + b

    继续打开ReturnStatement,里面是一个BinaryExpression(二项式)对象，用来表示a + b

    继续打开BinaryExpression，它成了三部分，left，operator，right

    • operator 即+
    • left 里面装的，是Identifier对象 a
    • right 里面装的，是Identifer对象 b

recast工具

npm i recast

parse.js

// 给你一把"螺丝刀"——recast
const recast = require("recast");

// 你的"机器"——一段代码
// 我们使用了很奇怪格式的代码，想测试是否能维持代码结构
const code =
  `
  function add(a, b) {
    return a +
      // 有什么奇怪的东西混进来了
      b
  }
  `
// 用螺丝刀解析机器
const ast = recast.parse(code);

// ast可以处理很巨大的代码文件
// 但我们现在只需要代码块的第一个body，即add函数
const add  = ast.program.body[0]

console.log(add)

输入node parse.js你可以查看到add函数的结构，与之前所述一致

你也可以继续使用console.log透视它的更内层，如：

console.log(add.params[0])
console.log(add.body.body[0].argument.left)

recast.types.builders 制作模具

recast.types.builders里面提供了不少“模具”，可以轻松地拼接成新的代码。

最简单的例子，我们想把之前的function add(a, b){...}声明，改成匿名函数式声明const add = function(a ,b){...}

如何改装？

第一步，我们创建一个VariableDeclaration变量声明对象，声明头为const， 内容为一个即将创建的VariableDeclarator对象。

第二步，创建一个VariableDeclarator，放置add.id在左边， 右边是将创建的FunctionDeclaration对象

第三步，我们创建一个FunctionDeclaration，如前所述的三个组件，id params body中，因为是匿名函数id设为空，params使用add.params，body使用add.body。

这样，就创建好了const add = function(){}的AST对象。

在之前的parse.js代码之后，加入以下代码

// 引入变量声明，变量符号，函数声明三种“模具”
const {variableDeclaration, variableDeclarator, functionExpression} = recast.types.builders

// 将准备好的组件置入模具，并组装回原来的ast对象。
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)

可以看到，我们打印出了

const add = function(a, b) {
  return a +
    // 有什么奇怪的东西混进来了
    b
};

最后一行

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

其实是recast.parse的逆向过程，具体公式为

recast.print(recast.parse(source)).code === source

打印出来还保留着“原装”的函数内容，连注释都没有变。

我们其实也可以打印出美化格式的代码段：

const output = recast.prettyPrint(ast, { tabWidth: 2 }).code

输出为

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

实战进阶：如何修改js文件

除了parse/print/builder以外，Recast的三项主要功能：

  • run: 通过命令行读取js文件，并转化成ast以供处理。
  • tnt： 通过assert()和check()，可以验证ast对象的类型。
  • visit: 遍历ast树，获取有效的AST对象并进行更改。

创建一个用来示例文件，假设是demo.js

demo.js

function add(a, b) {
  return a + b
}

function sub(a, b) {
  return a - b
}

function commonDivision(a, b) {
  while (b !== 0) {
    if (a > b) {
      a = sub(a, b)
    } else {
      b = sub(b, a)
    }
  }
  return a
}
recast.run —— 命令行文件读取

新建一个名为read.js的文件，写入
read.js

recast.run( function(ast, printSource){
    printSource(ast)
})

命令行输入

node read demo.js

可以查看js文件打印的内容。

我们可以知道，node read可以读取demo.js文件，并将demo.js内容转化为ast对象。

同时它还提供了一个printSource函数，随时可以将ast的内容转换回源码。

recast.visit —— AST节点遍历

read.js

#!/usr/bin/env node
const recast  = require('recast')

recast.run(function(ast, printSource) {
  recast.visit(ast, {
      visitExpressionStatement: function({node}) {
        console.log(node)
        return false
      }
    });
});

recast.visit将AST对象内的节点进行逐个遍历。

  • 想操作函数声明，就使用visitFunctionDelaration遍历，想操作赋值表达式，就使用visitExpressionStatement。在前面加visit，即可遍历。
  • 通过node可以取到AST对象
  • 每个遍历函数后必须加上return false，或者选择以下写法，否则报错：
#!/usr/bin/env node
const recast  = require('recast')

recast.run(function(ast, printSource) {
  recast.visit(ast, {
      visitExpressionStatement: function(path) {
        const node = path.node
        printSource(node)
        this.traverse(path)
      }
    })
});

调试时，如果你想输出AST对象，可以console.log(node)

如果你想输出AST对象对应的源码，可以printSource(node)

命令行输入 node read demo.js进行测试。

TNT —— 判断AST对象类型

TNT，即recast.types.namedTypes，它用来判断AST对象是否为指定的类型。

TNT.Node.assert()，当函数不能完好运行时（类型不匹配），就会报错退出

TNT.Node.check()，则可以判断类型是否一致，并输出False和True

上述Node可以替换成任意AST对象，例如TNT.ExpressionStatement.check(),TNT.FunctionDeclaration.assert()

read.js

#!/usr/bin/env node
const recast = require("recast");
const TNT = recast.types.namedTypes

recast.run(function(ast, printSource) {
  recast.visit(ast, {
      visitExpressionStatement: function(path) {
        const node = path.value
        // 判断是否为ExpressionStatement，正确则输出一行字。
        if(TNT.ExpressionStatement.check(node)){
          console.log('这是一个ExpressionStatement')
        }
        this.traverse(path);
      }
    });
});

read.js

#!/usr/bin/env node
const recast = require("recast");
const TNT = recast.types.namedTypes

recast.run(function(ast, printSource) {
  recast.visit(ast, {
      visitExpressionStatement: function(path) {
        const node = path.node
        // 判断是否为ExpressionStatement，正确不输出，错误则全局报错
        TNT.ExpressionStatement.assert(node)
        this.traverse(path);
      }
    });
});

命令行输入 node read demo.js进行测试。

实战：用AST修改源码，导出全部方法

exportific.js

用AST实现将demo中的function能够全部导出的形式，例如

function add (a, b) {
    return a + b
}

想改变为

exports.add = (a, b) => {
  return a + b
}

首先，我们先用builders凭空实现一个键头函数

exportific.js

推断出exports.add = ()=>{}的过程，从而得到具体的AST结构体；

使用node exportific demo.js运行可查看结果。

ExpressionStatement: 表达式语句节点，a = a + 1 或者 a++ 里边会有一个 expression 属性指向一个表达式节点对象（后边会提及表达式）。

memberExpression: 成员表达式节点，即表示引用对象成员的语句，object 是引用对象的表达式节点，property 是表示属性名称，computed 如果为 false，是表示 . 来引用成员，property 应该为一个 Identifier 节点，如果 computed 属性为 true，则是 [] 来进行引用，即 property 是一个 Expression 节点，名称是表达式的结果值。

assignmentExpression: 赋值表达式节点，operator 属性表示一个赋值运算符，left 和 right 是赋值运算符左右的表达式

#!/usr/bin/env node
const recast = require("recast");
const {
  identifier:id,
  expressionStatement,
  memberExpression,
  assignmentExpression,
  arrowFunctionExpression,
  blockStatement
} = recast.types.builders

recast.run(function(ast, printSource) {
  // 一个块级域 {}
  console.log('\n\nstep1:')
  printSource(blockStatement([]))

  // 一个键头函数 ()=>{}
  console.log('\n\nstep2:')
  printSource(arrowFunctionExpression([],blockStatement([])))

  // add赋值为键头函数  add = ()=>{}
  console.log('\n\nstep3:')
  printSource(assignmentExpression('=',id('add'),arrowFunctionExpression([],blockStatement([]))))

  // exports.add赋值为键头函数  exports.add = ()=>{}
  console.log('\n\nstep4:')
  printSource(expressionStatement(assignmentExpression('=',memberExpression(id('exports'),id('add')),
    arrowFunctionExpression([],blockStatement([])))))
});

接下来，只需要在获得的最终的表达式中，把id(‘add’)替换成遍历得到的函数名，把参数替换成遍历得到的函数参数，把blockStatement([])替换为遍历得到的函数块级作用域。

另外，我们需要注意，在commonDivision函数内，引用了sub函数，应改写成exports.sub

exportific.js

#!/usr/bin/env node
const recast = require("recast");
const {
  identifier: id,
  expressionStatement,
  memberExpression,
  assignmentExpression,
  arrowFunctionExpression
} = recast.types.builders

recast.run(function (ast, printSource) {
  // 用来保存遍历到的全部函数名
  let funcIds = []
  recast.types.visit(ast, {
    // 遍历所有的函数定义
    visitFunctionDeclaration(path) {
      //获取遍历到的函数名、参数、块级域
      const node = path.node
      const funcName = node.id
      const params = node.params
      const body = node.body

      // 保存函数名
      funcIds.push(funcName.name)
      // 这是上一步推导出来的ast结构体
      const rep = expressionStatement(assignmentExpression('=', memberExpression(id('exports'), funcName),
        arrowFunctionExpression(params, body)))
      // 将原来函数的ast结构体，替换成推导ast结构体
      path.replace(rep)
      // 停止遍历
      return false
    }
  })


  recast.types.visit(ast, {
    // 遍历所有的函数调用
    visitCallExpression(path){
      const node = path.node;
      // 如果函数调用出现在函数定义中，则修改ast结构
      if (funcIds.includes(node.callee.name)) {
        node.callee = memberExpression(id('exports'), node.callee)
      }
      // 停止遍历
      return false
    }
  })
  // 打印修改后的ast源码
  printSource(ast)
})

做一个最简单的exportific前端工具

可以通过简单的改写，就能通过recast制作成一个名为exportific的源码编辑工具。

以下代码添加作了两个小改动

  1. 添加说明书–help，以及添加了–rewrite模式，可以直接覆盖文件或默认为导出*.export.js文件。
  2. 将之前代码最后的 printSource(ast)替换成 writeASTFile(ast,filename,rewriteMode)

exportific.js

#!/usr/bin/env node
const recast = require("recast");
const {
  identifier: id,
  expressionStatement,
  memberExpression,
  assignmentExpression,
  arrowFunctionExpression
} = recast.types.builders

const fs = require('fs')
const path = require('path')
// 截取参数
const options = process.argv.slice(2)

//如果没有参数，或提供了-h 或--help选项，则打印帮助
if(options.length===0 || options.includes('-h') || options.includes('--help')){
  console.log(`
    采用commonjs规则，将.js文件内所有函数修改为导出形式。

    选项： -r  或 --rewrite 可直接覆盖原有文件
    `)
  process.exit(0)
}

// 只要有-r 或--rewrite参数，则rewriteMode为true
let rewriteMode = options.includes('-r') || options.includes('--rewrite')

// 获取文件名
const clearFileArg = options.filter((item)=>{
  return !['-r','--rewrite','-h','--help'].includes(item)
})

// 只处理一个文件
let filename = clearFileArg[0]

const writeASTFile = function(ast, filename, rewriteMode){
  const newCode = recast.print(ast).code
  if(!rewriteMode){
    // 非覆盖模式下，将新文件写入*.export.js下
    filename = filename.split('.').slice(0,-1).concat(['export','js']).join('.')
  }
  // 将新代码写入文件
  fs.writeFileSync(path.join(process.cwd(),filename),newCode)
}


recast.run(function (ast, printSource) {
  let funcIds = []
  recast.types.visit(ast, {
    visitFunctionDeclaration(path) {
      //获取遍历到的函数名、参数、块级域
      const node = path.node
      const funcName = node.id
      const params = node.params
      const body = node.body

      funcIds.push(funcName.name)
      const rep = expressionStatement(assignmentExpression('=', memberExpression(id('exports'), funcName),
        arrowFunctionExpression(params, body)))
      path.replace(rep)
      return false
    }
  })


  recast.types.visit(ast, {
    visitCallExpression(path){
      const node = path.node;
      if (funcIds.includes(node.callee.name)) {
        node.callee = memberExpression(id('exports'), node.callee)
      }
      return false
    }
  })

  writeASTFile(ast,filename,rewriteMode)
})

现在尝试一下

node exportific demo.js

已经可以在当前目录下找到源码变更后的demo.export.js文件了。

npm发包

编辑一下package.json文件

{
  "name": "exportific",
  "version": "0.0.1",
  "description": "改写源码中的函数为可exports.XXX形式",
  "main": "exportific.js",
  "bin": {
    "exportific": "./exportific.js"
  },
  "keywords": [],
  "author": "wanthering",
  "license": "ISC",
  "dependencies": {
    "recast": "^0.15.3"
  }
}

注意bin选项，它的意思是将全局命令exportific指向当前目录下的exportific.js

这时，输入npm link 就在本地生成了一个exportific命令。

之后，只要哪个js文件想导出来使用，就exportific XXX.js一下。

这是在本地的玩法，想和大家一起分享这个前端小工具，只需要发布npm包就行了。

同时，一定要注意exportific.js文件头有

#!/usr/bin/env node

否则在使用时将报错。

抽象语法树的用途

浏览器最先就会把源码解析为抽象语法树，对浏览器而言AST的作用非常重要。

对开发者而言，AST的作用就是可以精准的定位到代码的任何地方，它就像是是你的手术刀，对代码进行一系列的操作。

常见的几种用途：代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等

如JSLint、JSHint对代码错误或风格的检查，发现一些潜在的错误

IDE的错误提示、格式化、高亮、自动补全等等

代码混淆压缩

UglifyJS2等

优化变更代码，改变代码结构使达到想要的结构

代码打包工具webpack、rollup等等

CommonJS、AMD、CMD、UMD等代码规范之间的转化

CoffeeScript、TypeScript、JSX等转化为原生Javascript

参考文档：

https://zhuanlan.zhihu.com/p/40102300

https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API#Node_objects

工具：http://esprima.org/demo/parse.html

fs:http://javascript.ruanyifeng.com/nodejs/fs.html#toc1

原来是你吖
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅析AST抽象语法树及Python代码实现
09-21
Abstract Syntax Tree抽象语法树简写为ATS,是相当于用树结构将代码程式表现出来的一种数据结构,这里我们就来浅析AST抽象语法树及Python代码实现
抽象语法树的简介及应用
最新发布
迈达量化的博客
04-02 538
AST的目的是提供一种简化的、更易于处理的表示形式，以便在编译器或解释器的各个阶段中使用。通过分析AST，可以对源代码进行结构上的修改，例如添加、删除或替换代码块，以实现代码的重构和改写。通过分析AST，可以检测代码中的潜在问题和错误，例如未使用的变量、死代码、代码重复等。它不受源语言的具体语法规则的限制，因此可以用于不同的编程语言。抽象语法树（AST）是源代码语法结构的一种抽象表示，以树状的形式表现编程语言的语法结构。以上是抽象语法树的一些应用场景，它在编程语言的解析、分析和处理过程中起着重要的作用。
AST-抽象语法树
cmdssd1的专栏
05-14 2万+
转自：http://blog.csdn.net/philosophyatmath/article/details/38170131 抽象语法树简介 (一)简介 抽象语法树（abstract syntax code，AST）是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构，这所以说是抽象的，是因为抽象语法树并不会表示出真实语法出现的每一个细节，比如说，嵌
AST抽象语法树
前端学习博客
09-21 2237
webpack和Lint等很多的工具和库的核心都是通过抽象语法树这个概念来实现对代码的检查、分析等操作的代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等如 JSLint、JSHint 对代码错误或风格的检查，发现一些潜在的错误IDE 的错误提示、格式化、高亮、自动补全等等代码混淆压缩UglifyJS2 等优化变更代码，改变代码结构使达到想要的结构代码打包工具 webpack、rollup 等等。
抽象语法树(Abstract Syntax Tree)
weixin_34268610的博客
04-15 880
一般来说，程序中的一段源代码在执行之前会经历下面三个步骤1 分词／词法分析这个过程会将由字符组成的字符串分解成有意义的代码快，这些代码块被称为词法单元。例如 var a = 4；会被分解成 var、a、=、4、; 2 解析／语法分析这个过程是将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树，这个树就叫“抽象语法树...
抽象语法树(AST)
爱远方的博客
02-07 749
尽管有一些缺点，但抽象语法树在编程语言领域中被广泛应用，因为它提供了一种便捷且有效的方式来处理和分析源代码。
抽象语法书AST
皮皮王的专栏
11-05 723
抽象语法树（AST），是一个非常基础而重要的知识点，但国内的文档却几乎一片空白。 本文将带大家从底层了解AST,并且通过发布一个小型前端工具，来带大家了解AST的强大功能 Javascript就像一台精妙运作的机器，我们可以用它来完成一切天马行空的构思。 我们对javascript生态了如指掌，却常忽视javascript本身。这台机器，究竟是哪些零部件在支持着它运行？ AST在日常业务中也许很难涉及到，但当你不止于想做一个工程师，而想做工程师的工程师，写出vue、react之类的大型框架，或类似w
abstract-syntax-tree:一个用于处理抽象语法树的库
05-12
一个用于处理抽象语法树的库。 目录 背景 抽象语法树是表示源代码的一种方式。 对于此库，它以格式表示。 例如，以下源代码： const answer = 42 具有以下表示形式： { " type " : " Program " , " body " : ...
Compilers-Crux-Abstract-Syntax-Tree:关键语言 AST 实现
06-12
编译器-关键-抽象-语法-树关键语言 AST 实现
react-ast：使用react渲染抽象语法树
02-01
快速React 使用react渲染抽象语法树如果您认为它有用，请★此回购★★★★ 本质上，抽象语法树很难使用。 这是一个React渲染器，使与抽象语法树进行交互并轻松渲染代码。 React AST是使用React渲染抽象语法树的最终...
抽象语法树的定义（C语言版）
青衫客36的博客
04-02 787
给定抽象语法：E -> n| E + E| E * E构造出相应的抽象语法树。
论文笔记 - 基于抽象语法树的代码表示方法（ASTNN）
weixin_44019380的博客
03-10 1769
astnn论文阅读笔记
vue源码解析---AST抽象语法树
每天都要努力学习哦~~
08-03 1118
在计算机科学中，抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。我们可以理解为：把 template（模板）解析成一个对象，该对象是包含这个模板所以信息的一种数据，而这种数据浏览器是不支持的，为Vue后面的处理template提供基础数据。...
抽象语法树 c语言,一个简单的例子看懂抽象语法树的魔力
weixin_42118423的博客
05-19 1436
在计算机科学中，抽象语法树(Abstract Syntax Tree，AST)，或简称语法树(Syntax tree)，是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。上面这是百度百科的定义，一如既往的让人摸不着头脑。我们总结一下百度百科的定义：抽象语法树是一颗树树的每个节点都表示了源代码的一种 语法结构上面这段总结有几个关键词：抽象语...
Abstract Syntax Tree
陈灯的博客
12-08 6793
Summary The Abstract Syntax Tree is the base framework for many powerful tools of the Eclipse IDE, including refactoring, Quick Fix and Quick Assist. The Abstract Syntax Tree maps plain Java source c
详解AST抽象语法树
热门推荐
huangpb的博客
12-04 5万+
浅谈 AST 先来看一下把一个简单的函数转换成AST之后的样子。 // 简单函数 function square(n) { return n * n; } // 转换后的AST { type: "FunctionDeclaration", id: { type: "Identifier", name: "square" }, pa...
java 如何实现 Abstract Syntax Tree
06-09
Java可以通过使用ANTLR（ANother Tool for Language Recognition）工具来实现抽象语法树（AST）。ANTLR是一个流行的语法分析器生成器，它可以根据语法规则生成词法分析器和语法分析器，并且可以为生成的语法分析器产生AST。 具体实现步骤如下： 1.编写语法规则文件，定义程序的语法结构。ANTLR支持各种语言的语法规则定义，包括Java、C、C++等。 2.使用ANTLR生成词法分析器和语法分析器。 3.使用语法分析器分析源代码，并生成AST。ANTLR提供了用于构建AST的工具，可以方便地构建AST节点。 4.对生成的AST进行遍历和处理，进行语义分析、代码优化、代码生成等操作。 需要注意的是，ANTLR生成的AST是具体语法树（Concrete Syntax Tree，CST），即包含了源代码中所有的语法元素，包括符号、括号等等。如果需要生成抽象语法树（AST），需要对CST进行一定的转换和简化。 总之，Java可以通过ANTLR工具来实现抽象语法树，从而对程序进行语法分析、语义分析等操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值