Home > Article > Web Front-end > 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
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. .
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
There are 4 types in total, then we will analyze these 4 types of nodes separately, starting with the simplest one
{ "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?
{ "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)
{ "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 literally means a function call expression, which is a little more troublesome
{ "type": "CallExpression", "callee": {...}, "arguments": [...] }
CallExpression has 2 fields we need:
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); }
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...
In addition to the most cumbersome method I introduced above, in fact, js There are several ways to directly execute string code
const script = document.createElement("script"); script.innerText = 'alert("hello world!")'; document.body.appendChild(script);
eval('alert("hello world!")')
new Function('alert("hello world")')();
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!