| |
|
开发:
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格式的大字符串,包含有代码相关信息,如:成员表达式调用、参数、标识符、字符串字面量等等。如:
上面,是一段AST。 本文将要实现的目标的:直接运行这段AST。 先展示运行效果,如下: 即,运行后,输出一了个字符串。 功能意义其实,如果直接要输出这样一个字符串,在JavaScript中是极为简单的,只需简单的一句:console.log('jshaman')。 那么,为什么要转化为复杂的AST,再执行AST呢? 其意义在于:我们将要实现一个AST解释器,引申而言,实现一个JavaScript解释器。在很多场景中,具有非常实用的意义。 比如,在小程序中屏蔽了Eval函数,而如果我们自己实现解释器,将可突破这个限制。 又比如,JShaman研发团队中,将它用于JavaScript代码加密。
实现方案要让这个AST能被执行,即要依JavaScript代码标准解释AST。 首先,尝试理解console.log('jshaman')这句代码的AST。通过astexplorer查看: 可以看到,这一句代码转成的AST中,包含7个节点。 那么,要执行这个AST,就要能正确处理这7种节点类型。 由于AST是JSON结构,处理时,可遍历其所有的成员节点。参考astexplorer展示的节点,分别处理:File、Program、ExpressionStatement、CallExpression等,代码如下: 当遇到CallExpression时,获取其对应的参数、方法名等,如下图: 并用apply的方式进行执行,以返回结果。 原理即如此。 编码时,对照着AST节点类型,完成相应的操作即可,为方便调试,可输出节点类型加以分析,如下图: 完整源码完整源码如下,保存为JS,在NodeJS环境中即可运行。也可在浏览器中直接运行代码,更为方便。
AST简化 以上代码中,使用的是简化过的AST。astexplorer默认生成的AST,内容较多,如下图: 其包含有代码行号、起始、结束等位置信息: 但这些冗长的位置信息对于执行是无用的,可以将其去除,实现简化的AST: 这样就成为了代码中使用的、较简短的AST。 |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
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- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |