Write a js interpreter using JavaScript

Use js to Compile js It seems to be a high-end thing, but the actual principle is actually very simple. It is nothing more than using js Object properties can be represented by strings This feature is implemented Just black magic.
The reason why it seems so deep is probably because the existing tutorials on the Internet always start with babylon / @babel/parser Let everyone take a look first. A long list of AST, and then a long list of codes,
directly recursively AST to process all types of nodes. In the end, the novices were successfully scared away.

So the purpose of writing this article today is to give you a js2js tutorial that is easy to understand and can be understood by even people who have just learned js.

Let’s take a look at the effect first

The simplest interpreter

As mentioned above, js has a characteristicObject attributes can be represented by strings, for example, console.log is equivalent to console['log']. Based on this feature, we can write an extremely crude prototype with poor compatibility

  function callFunction(fun, arg) {

    this[fun](arg);

  }

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

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

Since it is a simple version, there must be a lot of problems. The syntax in js is not just function calls. Let’s see how assignment is implemented using black magic.

  function declareVarible(key, value) {

    this[key] = value;

  }

  declareVarible.call(window, 'foo', 'bar');

  // window.foo = 'bar'

Tips: const You can use Object.defineProperty to achieve this;

If you can understand the above code, it means that you already understand the basic principles of js interpreter. If you can't understand it, you have to blame me. .

Strengthen it a little

As you can see, for convenience above, we wrote the function call ascallFunction('alert', 'hello world'); But take a look It doesn't look like a js interpreter at all,
The interpreter we want should at least look like thisparse('alert("hello world")''), then let's make a little modification. Here we have to introduce babel,
But don't worry yet, the syntax tree (AST) we parse is also very simple.

import babelParser from '@babel/parser';

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

const ast = babelParser.parse(code);

The above code parses the following content

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

The above content seems to be a lot, but what we actually use is actually only a small part. Let’s simplify it a little and put it into use. Remove the fields that are reached first

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

Let’s first browse through all the data with attribute names type in the AST

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

There are 4 types in total, then we will analyze these 4 types of nodes separately, starting with the simplest one

Literal

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

For Literal content, all we need is a value attribute, which can be returned directly.

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

Isn’t it very simple?

Identifier

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

Identifier is also very simple. It represents a variable that already exists. The variable name is node.name. Since it is an existing variable, its value is what?

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

The above alert we get from node.name is a character, which can be accessed through this['xxxxx'] Go to the identifier (Identifier) ​​in the current scope (here is window)

ExpressionStatement

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

This is actually super simple, there is no substantial content, the real content is all inexpression attribute, so you can directly return the content of expression

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

CallExpression

CallExpression literally means a function call expression, which is a little more troublesome

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

CallExpression has 2 fields we need:

1. callee is a reference to the function, and the content inside is an Identifier, which can be processed using the above method.
2. The content inside arguments is the parameter array passed when calling. What we currently need to process is a Literal, and there are already processing methods above.

Having said this, I believe you already know how to do it

if(node.type === 'CallExpression') {

    // 函数
    const callee = 调用 Identifier 处理器

    // 参数
    const args = node.arguments.map(arg => {
      return 调用 Literal 处理器
    });

    callee(...args);
}

Code

Here is a simple implementation that can run through the above process, but it can only run through the above, and other features have not been implemented yet.

https://github.com/noahlam/pr...

Other implementation methods

In addition to the most cumbersome method I introduced above, in fact, js There are several ways to directly execute string code

1. Insert script DOM

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

1. eval

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

1. new Function

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

1. setTimeout Family

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

But these are all ruthlessly blocked in the mini program...
Finally, give We recommend a front-end learning advanced internal communication group 685910553 (front-end information sharing). No matter where you are on the earth,
no matter how many years you have been working, you are welcome to join! (The group will regularly provide free study books and materials collected by the group owner as well as compiled interview questions and answer documents!)

If you have any objections to this article, please write in the comments section of the article your comments.

If you find this article interesting, please share it and forward it, or you can also follow it to express your recognition and encouragement of our article.

I hope everyone can go further and further on the road of programming.

Recommended tutorial: "JS Tutorial"

The above is the detailed content of Write a js interpreter using JavaScript. For more information, please follow other related articles on the PHP Chinese website!