IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript黑科技:实现一个AST解释器 -> 正文阅读

[JavaScript知识库]JavaScript黑科技:实现一个AST解释器

JavaScript黑科技:直接运行AST(抽象语法树)

实现一个AST解释器

一段JavaScript代码,经过语法分析、语法分析等编译过程之后,会形成一个对应的AST(抽象语法树),形如:

AST是一个JSON格式的大字符串,包含有代码相关信息,如:成员表达式调用、参数、标识符、字符串字面量等等。如:

{"type":"File","program":{"type":"Program","body":[{"type":"ExpressionStatement","expression":{"type":"CallExpression","callee":{"type":"MemberExpression","object":{"type":"Identifier","name":"console"},"property":{"type":"Identifier","name":"log"}},"arguments":[{"type":"StringLiteral","value":"jshaman"}]}}]}}

上面,是一段AST。

本文将要实现的目标的:直接运行这段AST。

先展示运行效果,如下:

即,运行后,输出一了个字符串。

功能意义

其实,如果直接要输出这样一个字符串,在JavaScript中是极为简单的,只需简单的一句:console.log('jshaman')。

那么,为什么要转化为复杂的AST,再执行AST呢?

其意义在于:我们将要实现一个AST解释器,引申而言,实现一个JavaScript解释器。在很多场景中,具有非常实用的意义。

比如,在小程序中屏蔽了Eval函数,而如果我们自己实现解释器,将可突破这个限制。

又比如,JShaman研发团队中,将它用于JavaScript代码加密。

Tip:JShaman是国内专业的JavaScript代码保护研究团队,拥有众多自主的JS代码加密方案,此为其一。

实现方案

要让这个AST能被执行,即要依JavaScript代码标准解释AST。

首先,尝试理解console.log('jshaman')这句代码的AST。通过astexplorer查看:

可以看到,这一句代码转成的AST中,包含7个节点。

那么,要执行这个AST,就要能正确处理这7种节点类型。

由于AST是JSON结构,处理时,可遍历其所有的成员节点。参考astexplorer展示的节点,分别处理:File、Program、ExpressionStatement、CallExpression等,代码如下:

当遇到CallExpression时,获取其对应的参数、方法名等,如下图:

并用apply的方式进行执行,以返回结果。

原理即如此。

编码时,对照着AST节点类型,完成相应的操作即可,为方便调试,可输出节点类型加以分析,如下图:

完整源码

完整源码如下,保存为JS,在NodeJS环境中即可运行。也可在浏览器中直接运行代码,更为方便。

//各节点处理器
var visitors = {
//File节点,JS代码AST的根节点
File(node, scope) {
ast_excute(node.program, scope);
},
//File的次节点,其Body下对应各行JS代码
Program(program, scope) {
for (i=0; i< program.body.length;i++) {
//执行各行代码的AST
ast_excute(program.body[i], scope);
}
},
//Call调用AST之外会包裹有一层表达式语句结构
ExpressionStatement(node, scope) {
return ast_excute(node.expression, scope);
},
//Call调用
CallExpression(node, scope){
//遍历callee获取函数体
var func = ast_excute(node.callee, scope);
//获取参数
var args = node.arguments.map( function(arg){
return ast_excute(arg, scope)
});

var value;
if (node.callee.type === 'MemberExpression') {
value = ast_excute(node.callee.object, scope);
}
//返回函数运行结果
return func.apply(value, args)
},
//成员表达式
MemberExpression(node, scope){
//获取对象,如console
var obj = ast_excute(node.object, scope);
//获取对象的方法,如log
var name = node.property.name
//返回表达式,如console.log
return obj[name]
},
//标识符
Identifier(node, scope) {
return scope[node.name];
},
//字符串字面量
StringLiteral(node) {
return node.value;
},
};
//执行
function ast_excute(node, scope) {
var _evalute = visitors[node.type];
if (!_evalute) {
throw new Error("未知的AST类型:" , node.type);
}
// 递归调用
return _evalute(node, scope);
}
var ast = {"type":"File","program":{"type":"Program","body":[{"type":"ExpressionStatement","expression":{"type":"CallExpression","callee":{"type":"MemberExpression","object":{"type":"Identifier","name":"console"},"property":{"type":"Identifier","name":"log"}},"arguments":[{"type":"StringLiteral","value":"jshaman"}]}}]}};
ast_excute(ast, {console});

AST简化

以上代码中,使用的是简化过的AST。astexplorer默认生成的AST,内容较多,如下图:

其包含有代码行号、起始、结束等位置信息:

但这些冗长的位置信息对于执行是无用的,可以将其去除,实现简化的AST:

这样就成为了代码中使用的、较简短的AST。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-18 17:32:12  更:2022-04-18 17:33:00 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 2:40:31-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码