当前位置：首页 > JavaScript

用js实现js引擎

2026-03-02 03:57:23JavaScript

用 JavaScript 实现 JavaScript 引擎

在 JavaScript 中实现一个简化版的 JavaScript 引擎需要解析、解释和执行代码。以下是关键步骤和实现思路：

词法分析（Lexical Analysis）

将源代码分解为令牌（tokens）。例如，将 var x = 42; 分解为 var、x、=、42 和 ;。

function tokenize(code) {
  const tokens = [];
  let current = 0;
  while (current < code.length) {
    let char = code[current];
    if (/\s/.test(char)) {
      current++;
      continue;
    }
    if (/[a-zA-Z]/.test(char)) {
      let value = '';
      while (/[a-zA-Z0-9]/.test(char)) {
        value += char;
        char = code[++current];
      }
      tokens.push({ type: 'IDENTIFIER', value });
      continue;
    }
    if (/[0-9]/.test(char)) {
      let value = '';
      while (/[0-9]/.test(char)) {
        value += char;
        char = code[++current];
      }
      tokens.push({ type: 'NUMBER', value });
      continue;
    }
    if (char === '=') {
      tokens.push({ type: 'ASSIGN', value: '=' });
      current++;
      continue;
    }
    if (char === ';') {
      tokens.push({ type: 'SEMICOLON', value: ';' });
      current++;
      continue;
    }
    throw new Error(`Unknown character: ${char}`);
  }
  return tokens;
}

语法分析（Parsing）

将令牌转换为抽象语法树（AST）。例如，将 var x = 42; 转换为：

{
  "type": "VariableDeclaration",
  "identifier": "x",
  "assignment": {
    "type": "Literal",
    "value": 42
  }
}

function parse(tokens) {
  let current = 0;
  function walk() {
    let token = tokens[current];
    if (token.type === 'NUMBER') {
      current++;
      return { type: 'Literal', value: Number(token.value) };
    }
    if (token.type === 'IDENTIFIER') {
      current++;
      return { type: 'Identifier', name: token.value };
    }
    if (token.type === 'VAR') {
      current++;
      const node = { type: 'VariableDeclaration', id: walk(), init: null };
      if (tokens[current].type === 'ASSIGN') {
        current++;
        node.init = walk();
      }
      return node;
    }
    throw new Error(`Unknown token: ${token.type}`);
  }
  return walk();
}

解释执行（Interpreter）

遍历 AST 并执行代码逻辑。例如，处理变量声明和赋值：

用js实现js引擎

function interpret(ast, env = {}) {
  switch (ast.type) {
    case 'Literal':
      return ast.value;
    case 'Identifier':
      return env[ast.name];
    case 'VariableDeclaration':
      env[ast.id.name] = ast.init ? interpret(ast.init, env) : undefined;
      return undefined;
    default:
      throw new Error(`Unknown node type: ${ast.type}`);
  }
}

示例用法

const code = 'var x = 42;';
const tokens = tokenize(code);
const ast = parse(tokens);
const env = {};
interpret(ast, env);
console.log(env.x); // 输出: 42