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。