手摸手教你用 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/pr…
其他完成体式格局
除了上面我引见得这类最烦琐得体式格局外，实在 js 另有好几种能够直接实行字符串代码得体式格局
- 插进去 script DOM
const script = document.createElement("script");
script.innerText = 'alert("hello world!")';
document.body.appendChild(script);- eval
eval('alert("hello world!")')- new Function
new Function('alert("hello world")')();- setTimeout 家属
setTimeout('console.log("hello world")');不过这些在小顺序内里都被无情得封杀了…
