用 js 写一个 js 解释器过程详解


Posted in Javascript onAugust 02, 2019

用 js 来 编译 js 看起来是个高大上的东西,实际原理其实很简单,无非就是利用 js 对象属性可以用字符串表示 这个特性来实现的黑魔法罢了。

之所以看起来那么 深奥, 大概是由于网上现有的教程,都是动不动就先来个 babylon / @babel/parser 先让大家看个一大串的 AST, 然后再贴出一大串的代码,

直接递归 AST 处理所有类型的节点. 最后成功的把我这样的新手就被吓跑了。

那么今天我写这篇的目的,就是给大家一个浅显易懂,连刚学 js 的人都能看懂的 js2js 教程。

先来看一下效果

用 js 写一个 js 解释器过程详解

一个最简单的解释器

上面有提到,js 有个特性是 对象属性可以用字符串表示,如 console.log 等价于 console['log'], 辣么根据这个特性,我们可以写出一个兼容性极差,极其简陋的雏形

function callFunction(fun, arg) {
 this[fun](arg);
 }
 callFunction('alert', 'hello world');
 // 如果你是在浏览器环境的话,应该会弹出一个弹窗

既然是简易版的,肯定是问题一大堆,js 里面得语法不仅仅是函数调用,我们看看赋值是如何用黑魔法实现的

function declareVarible(key, value) {
 this[key] = value;
 }
 declareVarible.call(window, 'foo', 'bar');
 // window.foo = 'bar'

Tips: const 可以利用 Object.defineProperty 实现;

如果上面的代码能看懂,说明你已经懂得了 js 解释器 的基本原理了,看不懂那只好怪我咯。

稍微加强一下

可以看出,上面为了方便, 我们把函数调用写成了 callFunction('alert', 'hello world'); 但是着看起来一点都不像是 js 解释器,
我们心里想要的解释器至少应该是长这样的 parse('alert("hello world")''), 那么我们来稍微改造一下, 在这里我们要引入 babel 了,

不过先不用担心, 我们解析出来的语法树(AST)也是很简单的。

import babelParser from '@babel/parser';
const code = 'alert("hello world!")';
const ast = babelParser.parse(code);

以上代码, 解析出如下内容

{
 "type": "Program",
 "start": 0,
 "end": 21,
 "body": [
 {
 "type": "ExpressionStatement",
 "start": 0,
 "end": 21,
 "expression": {
 "type": "CallExpression",
 "start": 0,
 "end": 21,
 "callee": {
 "type": "Identifier",
 "start": 0,
 "end": 5,
 "name": "alert"
 },
 "arguments": [
 {
 "type": "Literal",
 "start": 6,
 "end": 20,
 "value": "hello world!",
 "raw": "\"hello world!\""
 }
 ]
 }
 }
 ],
 "sourceType": "module"
}

上面的内容看起来很多,但是我们实际有用到到其实只是很小的一部分, 来稍微简化一下, 把暂时用不到的字段先去掉

{
 "type": "Program",
 "body": [
 {
 "type": "ExpressionStatement",
 "expression": {
 "type": "CallExpression",
 "callee": {
 "type": "Identifier",
 "name": "alert"
 },
 "arguments": [
 {
 "type": "Literal",
 "value": "hello world!",
 }
 ]
 }
 }
 ],
}

我们先大概浏览一遍 AST 里面的所有属性名为 type 的数据

  • ExpressionStatement
  • CallExpression
  • Identifier
  • Literal

一共有 4 种类型, 那么接下来我们把这 4 种节点分别解析, 从最简单的开始

Literal

{
 "type": "Literal",
 "value": "hello world!",
}

针对 Literal 的内容, 我们需要的只有一个 value 属性, 直接返回即可.

if(node.type === 'Literal') {
 return node.value;
}

是不是很简单?

Identifier

{
 "type": "Identifier",
 "name": "alert"
},

Identifier 同样也很简单, 它代表的就是我们已经存在的一个变量, 变量名是node.name, 既然是已经存在的变量, 那么它的值是什么呢?

if(node.type === 'Identifier') {
 return {
 name: node.name,
 value:this[node.name]
 };
}

上面的 alert 我们从 node.name 里面拿到的是一个字符, 通过 this['xxxxx'] 可以访问到当前作用域(这里是 window)里面的这个标识符(Identifier)

ExpressionStatement

{
 "type": "ExpressionStatement",
 "expression": {...}
}

这个其实也是超简单, 没有什么实质性的内容, 真正的内容都在 expression 属性里,所以可以直接返回 expression 的内容

if(node.type === 'ExpressionStatement') {
 return parseAstNode(node.expression);
}

CallExpression

CallExpression 按字面的意思理解就是 函数调用表达式,这个稍微麻烦一点点

{
 "type": "CallExpression",
 "callee": {...},
 "arguments": [...]
}

CallExpression 里面的有 2 个我们需要的字段:

callee 是 函数的引用, 里面的内容是一个 Identifier, 可以用上面的方法处理.

arguments 里面的内容是调用时传的参数数组, 我们目前需要处理的是一个 Literal, 同样上面已经有处理方法了.

说到这里,相信你已经知道怎么做了

if(node.type === 'CallExpression') {
 // 函数
 const callee = 调用 Identifier 处理器
 // 参数
 const args = node.arguments.map(arg => {
 return 调用 Literal 处理器
 });
 callee(...args);
}

代码

这里有一份简单的实现, 可以跑通上面的流程, 但也仅仅可以跑通上面而已, 其他的特性都还没实现。

https://github.com/noahlam/practice-truth/tree/master/js2js

其他实现方式

除了上面我介绍得这种最繁琐得方式外,其实 js 还有好几种可以直接执行字符串代码得方式

1.插入 script DOM

const script = document.createElement("script");
 script.innerText = 'alert("hello world!")';
 document.body.appendChild(script);

2.eval

eval('alert("hello world!")')

3.new Function

new Function('alert("hello world")')();

4.setTimeout 家族

setTimeout('console.log("hello world")');

不过这些在小程序里面都被无情得封杀了...

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
五个jQuery图片画廊插件 推荐
May 12 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
创建一个类Person的简单实例
May 17 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 #Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 #Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 #jQuery
150行Node.js实现的dns代理工具
Aug 02 #Javascript
el-select 下拉框多选实现全选的实现
Aug 02 #Javascript
js动态获取时间的方法分析
Aug 02 #Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 #Javascript
You might like
什么是短波收听SWL
2021/03/01 无线电
用函数读出数据表内容放入二维数组
2006/10/09 PHP
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
python 修改本地网络配置的方法
2019/08/14 Python
Python argparse模块应用实例解析
2019/11/15 Python
Python类如何定义私有变量
2020/02/03 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
Python self用法详解
2020/11/28 Python
Pandas之缺失数据的实现
2021/01/06 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
"引用"与指针的区别是什么
2016/09/07 面试题
五一手机促销方案
2014/03/08 职场文书
2014年护士长工作总结
2014/11/11 职场文书
区域销售大会开幕词
2016/03/04 职场文书
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers