用JavaScript写一个js解释器

朱雀 2020-07-02 07:42 750阅读 0赞

# 用JavaScript写一个js解释器

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

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

先来看一下效果

![](/images/1593675733527.png)

### 一个最简单的解释器

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

```js
  function callFunction(fun, arg) {

this[fun](arg);

}

callFunction('alert', 'hello world');

// 如果你是在浏览器环境的话，应该会弹出一个弹窗
```

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

```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)也是很简单的。

```js
import babelParser from '@babel/parser';

const code = 'alert("hello world!")';

const ast = babelParser.parse(code);
```

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

```js
{
  "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"
}
```

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

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

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

1. ExpressionStatement
2. CallExpression
3. Identifier
4. Literal

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

#### Literal

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

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

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

是不是很简单？

#### Identifier

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

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

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