深度分享：从零实现一个JS引擎

背景

很久之前，我为了加深对JavaScript的理解，萌生了实现一个JS引擎的想法。当时，我找到一个叫 giao-js 的项目，觉得不错，因此决定学习一下并实现自己的版本。

原文地址：从零实现一个JS引擎

JS引擎概述

JS引擎是专门处理JavaScript脚本的虚拟机，通常嵌入在浏览器中。其主要作用是解析和执行JavaScript代码。要理解JS引擎的工作原理，我们需要从以下几个步骤入手：

词法分析：将JavaScript代码分解为标记（Token）。
语法分析：将标记转换为抽象语法树（AST）。
生成AST语法树：通过解析生成AST语法树。
生成字节码：将AST编译成字节码。
执行代码：将字节码转化为机器代码并执行。

本文将详细探讨实现这几个步骤的方法。

词法分析

词法分析的作用

词法分析的主要任务是将源代码分解为一个个有意义的单词或标记（Token）。例如：

const a = 1;

经过词法分析，上述代码会被拆分为以下标记：

[
  ("const": "keyword"),
  ("a": "identifier"),
  ("=": "assignment"),
  ("1": "literal"),
  (";": "separator"),
]

实现词法分析

我们可以使用 Acorn 库来进行词法分析。以下是实现代码：

const acorn = require('acorn');

const getToken = (code, ecmaVersion = '11') => {
  const tokenObj = acorn.tokenizer(code, {
    ecmaVersion,
    locations: true
  });
  const tokens = [];
  let token = tokenObj.getToken();
  while (token.end !== token.start) {
    tokens.push(token);
    token = tokenObj.getToken();
  }
  return tokens;
}

getToken(`const a = 1 + 1;`);
// 输出的Token数组

语法解析

语法解析的作用

语法解析是将词法分析生成的Token转换为抽象语法树（AST）的过程。AST是源代码语法结构的抽象表示。

实现语法解析

使用 Acorn 库来生成AST，代码如下：

const code = `function sum(a, b) { return a + b; }; const a = sum(1, 2);`
const acorn = require('acorn');

console.log(acorn.parse(code));

输出的AST结构如下：

Node {
  type: 'Program',
  start: 0,
  end: 53,
  body: [
    Node {
      type: 'FunctionDeclaration',
      start: 0,
      end: 31,
      id: Node { ... },
      params: [Array],
      body: Node { ... }
    },
    Node { type: 'EmptyStatement', start: 31, end: 32 },
    Node {
      type: 'VariableDeclaration',
      start: 33,
      end: 53,
      declarations: [Array],
      kind: 'const'
    }
  ],
  sourceType: 'script'
}

解释器

解释器的作用

解释器的任务是遍历AST语法树，并根据节点类型执行相应的操作。以下是解释器的基本实现框架：

class Scope {
  constructor(type, parent) {
    this.parent = parent || null;
    this.type = type;
    this.targetScope = new Map();
  }

  declare(kind, rawName, value) {
    this.targetScope.set(rawName, value);
  }
}

function visitNode(node, scope) {
  const { type } = node;
  if (VISITOR[type]) {
    return VISITOR[type]({ node, scope, context: this });
  }
  return undefined;
}

变量和作用域

在JavaScript中，变量声明通常与作用域绑定。作用域分为以下几种：

全局作用域
函数作用域
块级作用域

实现一个作用域类 Scope 代码如下：

class Scope {
  constructor(type, parent) {
    this.parent = parent || null;
    this.type = type;
    this.targetScope = new Map();
  }

  declare(kind, rawName, value) {
    this.targetScope.set(rawName, value);
  }
}

条件判断

以 IfStatement 为例，它包含以下属性：test（判断条件）、consequent（条件成立时执行的语句）、alternate（条件不成立时执行的语句）。代码示例如下：

const { test, consequent, alternate } = node;
const testValue = visitNode(test, scope);
if (testValue) {
  if(consequent){
    visitNode(consequent, scope);
  }
} else {
  if(alternate){
    visitNode(alternate, scope);
  }
}