0

0

怎样实现一个基于JavaScript的简单虚拟机或解释器?

狼影

狼影

发布时间:2025-09-27 12:30:01

|

585人浏览过

|

来源于php中文网

原创

先定义语法与词法规则,通过 tokenizer 将源码转为 tokens,再由 parser 构建 AST,最后 evaluate 函数遍历 AST 执行指令,实现变量赋值、表达式计算与打印输出。

怎样实现一个基于javascript的简单虚拟机或解释器?

实现一个基于 JavaScript 的简单虚拟机或解释器,核心是定义语言的语法、解析代码并执行指令。不需要复杂的编译原理知识,借助 JavaScript 的灵活性,可以快速搭建一个可运行的小型解释器。重点在于理解词法分析、语法树构建和执行过程。

定义语言结构与词法规则

先设计一种极简语言,比如支持变量赋值、算术运算和打印语句。例如:

x = 10
y = x + 5
print(y)

接下来进行词法分析(Tokenizer),把源码拆成一个个有意义的标记(tokens):

  • 识别标识符(如 x, y)
  • 识别数字(如 10, 5)
  • 识别操作符(=, +)
  • 识别关键字(如 print)

示例 tokenizer 函数:

立即学习Java免费学习笔记(深入)”;

function tokenize(input) {
  const tokens = [];
  const regex = /\s*(\d+|[a-zA-Z_]\w*|=.|\+|\(|\)|;|\n)\s*/g;
  let match;
  while ((match = regex.exec(input))) {
    const value = match[1];
    if (value === '\n') {
      tokens.push({ type: 'newline' });
    } else if (/^[a-zA-Z_]\w*$/.test(value)) {
      tokens.push({ type: 'identifier', value });
    } else if (/^\d+$/.test(value)) {
      tokens.push({ type: 'number', value: parseInt(value) });
    } else if (value === '=' || value === '+' || value === '(' || value === ')') {
      tokens.push({ type: 'operator', value });
    } else if (value === 'print') {
      tokens.push({ type: 'keyword', value });
    }
  }
  return tokens;
}

构建抽象语法树(AST)

将 token 流转换为树形结构,便于后续遍历执行。比如上面的例子可生成如下结构:

{
  type: "Program",
  body: [
    { type: "Assignment", name: "x", value: { type: "Number", value: 10 } },
    { type: "Assignment", name: "y", value: { type: "BinaryExpression", left: { type: "Identifier", name: "x" }, operator: "+", right: { type: "Number", value: 5 } } },
    { type: "Print", argument: { type: "Identifier", name: "y" } }
  ]
}

通过 parser 遍历 tokens 构建 AST:

Manus
Manus

全球首款通用型AI Agent,可以将你的想法转化为行动。

下载
function parse(tokens) {
  let current = 0;

function walk() { let token = tokens[current];

if (token.type === 'identifier') {
  // 可能是赋值或表达式
  const name = token.value;
  token = tokens[++current];
  if (token && token.type === 'operator' && token.value === '=') {
    current++;
    const value = walk();
    return {
      type: 'Assignment',
      name,
      value
    };
  }
  return { type: 'Identifier', name };
}

if (token.type === 'number') {
  current++;
  return { type: 'Number', value: token.value };
}

if (token.type === 'operator' && token.value === '+') {
  current++;
  return {
    type: 'BinaryExpression',
    left: { type: 'Identifier', name: tokens[current - 2].value },
    operator: '+',
    right: walk()
  };
}

if (token.type === 'keyword' && token.value === 'print') {
  current++;
  const arg = walk();
  return { type: 'Print', argument: arg };
}

throw new Error(`Unknown token: ${token.type}`);

}

const ast = { type: 'Program', body: [] };

while (current node = walk(); if (node) ast.body.push(node); }

return ast; }

实现解释器执行逻辑

解释器遍历 AST 并执行每个节点。需要维护一个变量环境(变量存储):

function evaluate(ast) {
  const env = {};

function exec(node) { switch (node.type) { case 'Program': node.body.forEach(exec); break;

  case 'Assignment':
    env[node.name] = exec(node.value);
    break;

  case 'Number':
    return node.value;

  case 'Identifier':
    if (!(node.name in env)) throw new Error(`Undefined variable: ${node.name}`);
    return env[node.name];

  case 'BinaryExpression':
    const left = exec(node.left);
    const right = exec(node.right);
    if (node.operator === '+') return left + right;
    break;

  case 'Print':
    console.log(exec(node.argument));
    break;

  default:
    throw new Error(`Unknown node type: ${node.type}`);
}

}

exec(ast); }

整合运行

将三部分串联起来:

const input = `
x = 10
y = x + 5
print(y)
`;

const tokens = tokenize(input); const ast = parse(tokens); evaluate(ast); // 输出 15

基本上就这些。你可以在此基础上扩展功能:支持函数、条件语句、作用域等。关键是理清“输入 → 分词 → 构建树 → 执行”的流程。不复杂但容易忽略细节,比如 token 位置管理和错误提示。用 JavaScript 实现解释器门槛低,适合学习语言设计基础。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
python中print函数的用法
python中print函数的用法

python中print函数的语法是“print(value1, value2, ..., sep=' ', end=' ', file=sys.stdout, flush=False)”。本专题为大家提供print相关的文章、下载、课程内容,供大家免费下载体验。

186

2023.09.27

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

778

2023.08.22

while的用法
while的用法

while的用法是“while 条件: 代码块”,条件是一个表达式,当条件为真时,执行代码块,然后再次判断条件是否为真,如果为真则继续执行代码块,直到条件为假为止。本专题为大家提供while相关的文章、下载、课程内容,供大家免费下载体验。

97

2023.09.25

登录token无效
登录token无效

登录token无效解决方法:1、检查token的有效期限,如果token已经过期,需要重新获取一个新的token;2、检查token的签名,如果签名不正确,需要重新获取一个新的token;3、检查密钥的正确性,如果密钥不正确,需要重新获取一个新的token;4、使用HTTPS协议传输token,建议使用HTTPS协议进行传输 ;5、使用双因素认证,双因素认证可以提高账户的安全性。

6193

2023.09.14

登录token无效怎么办
登录token无效怎么办

登录token无效的解决办法有检查Token是否过期、检查Token是否正确、检查Token是否被篡改、检查Token是否与用户匹配、清除缓存或Cookie、检查网络连接和服务器状态、重新登录或请求新的Token、联系技术支持或开发人员等。本专题为大家提供token相关的文章、下载、课程内容,供大家免费下载体验。

819

2023.09.14

token怎么获取
token怎么获取

获取token值的方法:1、小程序调用“wx.login()”获取 临时登录凭证code,并回传到开发者服务器;2、开发者服务器以code换取,用户唯一标识openid和会话密钥“session_key”。想了解更详细的内容,可以阅读本专题下面的文章。

1069

2023.12.21

token什么意思
token什么意思

token是一种用于表示用户权限、记录交易信息、支付虚拟货币的数字货币。可以用来在特定的网络上进行交易,用来购买或出售特定的虚拟货币,也可以用来支付特定的服务费用。想了解更多token什么意思的相关内容可以访问本专题下面的文章。

1358

2024.03.01

mysql标识符无效错误怎么解决
mysql标识符无效错误怎么解决

mysql标识符无效错误的解决办法:1、检查标识符是否被其他表或数据库使用;2、检查标识符是否包含特殊字符;3、使用引号包裹标识符;4、使用反引号包裹标识符;5、检查MySQL的配置文件等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

183

2023.12.04

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

1

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号