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

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

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

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

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

先来看一下效果

一个最简单的解释器

上面有提到,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")');

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

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

(0)

相关推荐

  • MAC中PyCharm设置python3解释器

    MAC上的PyCharm中默认的python解释器是python2的,windows下的没用过不是很清楚,所以特来记录下设置python3解释器的过程. python3的查找与安装 如果电脑中没有安装python3可以用brewhome来安装,简单记录下 // 查看python版本 python --version python3 --version // 搜索python brew search python // 安装python3 brew install python3 然后经过一个漫长

  • 在Pycharm中项目解释器与环境变量的设置方法

    1.官网下载Pycharm community版如pycharm-community-2017.3.1.tar.gz. 2. #解压tar.gz tar xfz pycharm-*.tar.gz cd bin ./Pycharm.sh 然后,一路next安装. 3.出现Pycharm图像界面时,表明安装成功. 4.新建项目 1)File->New project-> 设置项目所在路径: 设置解释器:ubuntu16.04默认安装python2.python3.python2.7.python3

  • javascript设计模式之解释器模式详解

    神马是"解释器模式"? 先翻开<GOF>看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如何创建一个抽象语法树.它不涉及语法分析.抽象语法树可用一个表驱动的语法分析程序来完成,也可用手写的(通常为递归下降法)语法分析程序创建,或直接client提供. 解析器: 指的是把描述客户端调用要求的表达式,经过解析,形成一个抽象语法树的程序. 解

  • Node.js REPL (交互式解释器)实例详解

    Node.js  REPL (交互式解释器)实例详解 Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端,我们可以在终端中输入命令,并接收系统的响应. Node 自带了交互式解释器,可以执行以下任务: 读取 - 读取用户输入,解析输入了Javascript 数据结构并存储在内存中. 执行 - 执行输入的数据结构 打印 - 输出结果 循环 - 循环操作以上步骤直到用户两次按下 ctrl-c 按钮退出. 多行表达式

  • node.js学习之交互式解释器REPL详解

    简介 repl是Node.js提供的一个Read-Eval-Print-Loop (REPL,读取-执行-输出-循环)实现,它即可以做为一个独立的程序使用,又可以包含在其它应用中使用.REPL是一个互式命令行解析器,它提供了一个交互式的编程环境,它可以实时的验证你所编写的代码,非常适合于验证Node.js和JavaScript的相关API. Node 自带了交互式解释器,可以执行以下任务: 读取 - 读取用户输入,解析输入了Javascript 数据结构并存储在内存中. 执行 - 执行输入的数据

  • 手写一个python迭代器过程详解

    分析 我们都知道一个可迭代对象可以通过iter()可以返回一个迭代器. 如果想要一个对象称为可迭代对象,即可以使用for,那么必须实现__iter __()方法. 在一个类的实例对象想要变成迭代器,就必须实现__iter__()和__next__()方法. 调用iter()时,在对象内部默认调用__iter__(),即__iter__()的返回值应该是一个迭代器. for的每次循环中或者next()时,都是自动调用迭代器的__next__()方法,并有一个返回值. 实现 class Classm

  • Nest.js快速启动API项目过程详解

    目录 快速启动 使用nest自带的命令行工具 直接使用starter项目 用npm安装所需的包 创建controller 创建service 结构和命名 HTTP请求 处理Axios对象 配置 全局添加headers API文档 快速启动 最近上了一个新项目,这个客户管理一个庞大的任务和团队集群,而不同流程所适用的系统也不太一样,比如salesforce,hubspots之类的.这次的新项目需要在另外两个平台之间做一些事情.目前只需要先封装其中之一的API,因此我们选定使用NodeJS的框架Ne

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

    用 js 来 编译 js 看起来是个高大上的东西,实际原理其实很简单,无非就是利用 js 对象属性可以用字符串表示 这个特性来实现的黑魔法罢了. 之所以看起来那么 深奥, 大概是由于网上现有的教程,都是动不动就先来个 babylon / @babel/parser 先让大家看个一大串的 AST, 然后再贴出一大串的代码, 直接递归 AST 处理所有类型的节点. 最后成功的把我这样的新手就被吓跑了. 那么今天我写这篇的目的,就是给大家一个浅显易懂,连刚学 js 的人都能看懂的 js2js 教程.

  • js 实现ajax发送步骤过程详解

    js发送ajax发送,分步骤进行 ajax的核心 是XMLHttpRequest, 步骤1:创建一个对象xmlrequest,在主流的浏览器都支持new , var xmlhttp = new XMLHttpRequest() IE浏览器不支持这种方法,需要再写一个函数来创建 步骤2 :连接服务端 得到XMLHTTPRequest对象后,就可以调用对象的open()方法,与服务器连接,参数如下 open(method,url,async): method:请求方法GET或POST, url:服务

  • 基于casperjs和resemble.js实现一个像素对比服务详解

    前言 本次分享一个提供设计稿与前端页面进行像素对比的node服务,旨在为测试或者前端人员自己完成一个辅助性测试.相信我,在像素级别的对比下,网页对设计稿的还原程度一下子就会凸显出来.下面话不多说了,来一起看看详细的介绍吧. 效果预览 前置知识 本次用到了以下两个库作为辅助工具: casperjs:基于PhantomJS的编写.其内部提供了一个无界面浏览器,简单来说用它你可以以代码的形式来完成模拟人来操作浏览器的操作,其中涉及鼠标各种事件,等等非常多的功能,本次主要使用其附带的截图功能. rese

  • vue.js从安装到搭建过程详解

    最初的时候用vue是直接下载相关文件 按照以前的方法来操作的 后来发现安装好以后似乎用起来更便利,然后就开始琢磨着怎么搭起框架来,下面是过程: 安装 1. 安装nodejs 直接网上找下载就好 2.安装淘宝镜像 打开命令行 输入 npm install -g cnpm --registry= https://registry.npm.taobao.org 3.安装webpack cnpm install webpack -g 4.在你想要新建项目的路径下新建文件夹 用于存放项目文件 cd 进入你

  • 基于Node.js搭建hexo博客过程详解

    一.安装新版本的nodejs和npm 安装n模块: npm install -g n 升级node.js到最新稳定版 n stable 二.安装hexo note: 参考github,不要去其官网 安装Hexo npm install hexo-cli -g Setup your blog hexo init blemesh cd blemesh 安装Cactus主题,众多开源主题中比较简洁的一个: 主题页 Cactus页 git clone https://github.com/probber

  • js变量值传到php过程详解 将php解析成数据

    一.总结 一句话总结:传参数去后台,用ajax,或者原生js方式拼接url.明白原理,洞悉系统是先解析php,再执行html代码和js代码. 二.用ajax 1. 页面提交数据: ajax 2. php页面获取参数: $val = $_POST['val'] 参考代码(jquery): $.ajax({ type: 'POST', url: 'save.php', data: {val: text1obj.value} success: function(msg){ // msg: php返回内

  • JS实现一个文件选择组件详解

    目录 前言 插件安装 插件使用 参数说明 前言 花了点时间利用广度与深度优先搜索算法实现了一个文件选择插件,支持无限层次的文件夹嵌套,已开源并打包上传到了npm. 本文将跟大家分享一下这个插件,欢迎各位感兴趣的开发者阅读本文. 插件安装 yarn add file-folder-selector # or npm install file-folder-selector --save 插件使用 在你需要使用此插件的业务代码中导入插件. <script setup lang="ts"

随机推荐