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++) {//执行各行代码的ASTast_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){//获取对象，如consolevar obj = ast_excute(node.object, scope);//获取对象的方法，如logvar name = node.property.name//返回表达式，如console.logreturn 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，内容较多，如下图：