编写一个javascript元循环求值器的方法


Posted in Javascript onApril 14, 2020

在上一篇文章中,我们通过AST完成了微信小程序组件的多端编译,在这篇文章中,让我们更深入一点,通过AST完成一个javascript元循环求值器

结构

一个元循环求值器,完整的应该包含以下内容:

  • tokenizer:对代码文本进行词法和语法分析,将代码分割成若干个token
  • parser:根据token,生成AST树
  • evaluate:根据AST树节点的type,执行对应的apply方法
  • apply:根据环境,执行实际的求值计算
  • scope:当前代码执行的环境

代码目录

根据结构看,我将代码目录大致拆分为以下几个文件

  • parser
  • eval
  • scope

tokenizer和parser这两个过程不是本文的重点,我统一放在了parser中,交由 @babel/parser 来处理。
evaluate和apply这两个过程我统一放在了eval文件中处理,一会我们重点看下这部分。
scope则放入scope文件。

evaluate-apply

这其实是一个递归计算的过程。

首先,evaluate 接收两个参数,node 当前遍历的AST树节点和 scope 当前环境。然后,evaluate去根据 node 的 type 属性,判断该节点是什么类型。判断出类型后,执行 apply 去求值这个节点所代表的表达式。apply 中会再次递归的执行 evaluate 去计算当前节点的子节点。最终,执行完整颗AST树。

我们来看下具体代码吧

const evaluate = (node: t.Node, scope) => {
 const evalFunc = evaluateMap[node.type];
 if (!evalFunc) {
 throw `${node.loc} ${node.type} 还未实现`;
 }
 return evalFunc(node, scope);
}

以上就是evaluate具体做的事。

其中,evaluateMap 是目前实现的内容集合,我们来看下具体的代码

const evaluateMap: EvaluateMap = {
 File(node: t.File, scope) {
 evaluate(node.program, scope);
 },

 Program(node: t.Program, scope) {
 for (const n of node.body) {
  evaluate(n, scope);
 }
 },

 Identifier(node: t.Identifier, scope) {
 const $var = scope.$find(node.name);
 if (!$var) {
  throw `[Error] ${node.loc}, '${node.name}' 未定义`;
 }
 return $var.$get();
 },

 StringLiteral(node: t.StringLiteral, scope) {
 return node.value;
 },

 NumericLiteral(node: t.NumericLiteral, scope) {
 return node.value;
 },

 BooleanLiteral(node: t.BooleanLiteral, scope) {
 return node.value;
 },

 NullLiteral(node: t.NullLiteral, scope) {
 return null;
 },

 BlockStatement(block: t.BlockStatement, scope) {
 const blockScope = scope.shared ? scope : new Scope('block', scope);
 for (const node of block.body) {
  const res = evaluate(node, blockScope);
  if (res === BREAK || res === CONTINUE || res === RETURN) {
  return res;
  }
 }
 },

 DebuggerStatement(node: t.DebuggerStatement, scope) {
 debugger;
 },

 ExpressionStatement(node: t.ExpressionStatement, scope) {
 evaluate(node.expression, scope);
 },

 ReturnStatement(node: t.ReturnStatement, scope) {
 RETURN.result = (node.argument ? evaluate(node.argument, scope) : void 0);
 return RETURN;
 },

 BreakStatement(node: t.BreakStatement, scope) {
 return BREAK;
 },

 ContinueStatement(node: t.ContinueStatement, scope) {
 return CONTINUE;
 },

 IfStatement(node: t.IfStatement, scope) {
 if (evaluate(node.test, scope)) {
  return evaluate(node.consequent, scope);
 }

 if (node.alternate) {
  const ifScope = new Scope('block', scope, true);
  return evaluate(node.alternate, ifScope)
 }
 },

 SwitchStatement(node: t.SwitchStatement, scope) {
 const discriminant = evaluate(node.discriminant, scope);
 const switchScope = new Scope('switch', scope);
 for (const ca of node.cases){
  if (ca.test === null || evaluate(ca.test, switchScope) === discriminant) {
  const res = evaluate(ca, switchScope);
  if (res === BREAK) {
   break;
  } else if (res === RETURN) {
   return res;
  }
  }
 }
 },

 SwitchCase(node: t.SwitchCase, scope) {
 for (const item of node.consequent) {
  const res = evaluate(item, scope);
  if (res === BREAK || res === RETURN) {
  return res;
  }
 }
 },

 ThrowStatement(node: t.ThrowStatement, scope) {
 throw evaluate(node.argument, scope);
 },

 TryStatement(node: t.TryStatement, scope) {
 try {
  return evaluate(node.block, scope);
 } catch (error) {
  if (node.handler) {
  const catchScope = new Scope('block', scope, true);
  catchScope.$let((<t.Identifier>node.handler.param).name, error);
  return evaluate(node.handler, catchScope);
  } else {
  throw error;
  }
 } finally {
  if (node.finalizer) {
  return evaluate(node.finalizer, scope);
  }
 }
 },

 CatchClause(node: t.CatchClause, scope) {
 return evaluate(node.body, scope);
 },

 WhileStatement(node: t.WhileStatement, scope) {
 while (evaluate(node.test, scope)) {
  const whileScope = new Scope('loop', scope, true);
  const res = evaluate(node.body, whileScope);
  if (res === CONTINUE) continue;
  if (res === BREAK) break;
  if (res === RETURN) return res;
 }
 },

 ForStatement(node: t.ForStatement, scope) {
 for (
  const forScope = new Scope('loop', scope),
  initVal = evaluate(node.init, forScope);
  evaluate(node.test, forScope);
  evaluate(node.update, forScope)
 ) {
  const res = evaluate(node.body, forScope);
  if (res === CONTINUE) continue;
  if (res === BREAK) break;
  if (res === RETURN) return res;
 }
 },

 ForInStatement(node: t.ForInStatement, scope) {
 const kind = (<t.VariableDeclaration>node.left).kind;
 const decl = (<t.VariableDeclaration>node.left).declarations[0];
 const name = (<t.Identifier>decl.id).name;

 for (const value in evaluate(node.right, scope)) {
  const forScope = new Scope('loop', scope, true);
  scope.$define(kind, name, value);
  const res = evaluate(node.body, forScope);
  if (res === CONTINUE) continue;
  if (res === BREAK) break;
  if (res === RETURN) return res;
 }
 },

 ForOfStatement(node: t.ForOfStatement, scope) {
 const kind = (<t.VariableDeclaration>node.left).kind;
 const decl = (<t.VariableDeclaration>node.left).declarations[0];
 const name = (<t.Identifier>decl.id).name;

 for (const value of evaluate(node.right, scope)) {
  const forScope = new Scope('loop', scope, true);
  scope.$define(kind, name, value);
  const res = evaluate(node.body, forScope);
  if (res === CONTINUE) continue;
  if (res === BREAK) break;
  if (res === RETURN) return res;
 }
 },

 FunctionDeclaration(node: t.FunctionDeclaration, scope) {
 const func = evaluateMap.FunctionExpression(node, scope);
 scope.$var(node.id.name, func);
 },

 VariableDeclaration(node: t.VariableDeclaration, scope) {
 const { kind, declarations } = node;
 for (const decl of declarations) {
  const varName = (<t.Identifier>decl.id).name;
  const value = decl.init ? evaluate(decl.init, scope) : void 0;
  if (!scope.$define(kind, varName, value)) {
  throw `[Error] ${name} 重复定义`
  }
 }
 },

 ThisExpression(node: t.ThisExpression, scope) {
 const _this = scope.$find('this');
 return _this ? _this.$get() : null;
 },

 ArrayExpression(node: t.ArrayExpression, scope) {
 return node.elements.map(item => evaluate(item, scope));
 },

 ObjectExpression(node: t.ObjectExpression, scope) {
 let res = Object.create(null);
 node.properties.forEach((prop) => {
  let key;
  let value;
  if(prop.type === 'ObjectProperty'){
  key = prop.key.name;
  value = evaluate(prop.value, scope);
  res[key] = value;
  }else if (prop.type === 'ObjectMethod'){
  const kind = prop.kind;
  key = prop.key.name;
  value = evaluate(prop.body, scope);
  if(kind === 'method') {
   res[key] = value;
  }else if(kind === 'get') {
   Object.defineProperty(res, key, { get: value });
  }else if(kind === 'set') {
   Object.defineProperty(res, key, { set: value });
  }
  }else if(prop.type === 'SpreadElement'){
  const arg = evaluate(prop.argument, scope);
  res = Object.assign(res, arg);
  }
 });
 return res;
 },

 FunctionExpression(node: t.FunctionExpression, scope) {
 return function (...args: any) {
  const funcScope = new Scope('function', scope, true);
  node.params.forEach((param: t.Identifier, idx) => {
  const { name: paramName } = param;
  funcScope.$let(paramName, args[idx]);
  });
  funcScope.$const('this', this);
  funcScope.$const('arguments', arguments);
  const res = evaluate(node.body, funcScope);
  if (res === RETURN) {
  return res.result;
  }
 }
 },

 ArrowFunctionExpression(node: t.ArrowFunctionExpression, scope) {
 return (...args) => {
  const funcScope = new Scope('function', scope, true);
  node.params.forEach((param: t.Identifier, idx) => {
  const { name: paramName } = param;
  funcScope.$let(paramName, args[idx]);
  });
  const _this = funcScope.$find('this');
  funcScope.$const('this', _this ? _this.$get() : null);
  funcScope.$const('arguments', args);
  const res = evaluate(node.body, funcScope);
  if (res === RETURN) {
  return res.result;
  }
 }
 },

 UnaryExpression(node: t.UnaryExpression, scope) {
 const expressionMap = {
  '~': () => ~evaluate(node.argument, scope),
  '+': () => +evaluate(node.argument, scope),
  '-': () => -evaluate(node.argument, scope),
  '!': () => !evaluate(node.argument, scope),
  'void': () => void evaluate(node.argument, scope),
  'typeof': () => {
  if (node.argument.type === 'Identifier') {
   const $var = scope.$find(node.argument.name);
   const value = $var ? $var.$get() : void 0;
   return typeof value;
  }
  return typeof evaluate(node.argument, scope);
  },
  'delete': () => {
  if (node.argument.type === 'MemberExpression') {
   const { object, property, computed } = node.argument;
   const obj = evaluate(object, scope);
   let prop;
   if (computed) {
   prop = evaluate(property, scope);
   } else {
   prop = property.name;
   }
   return delete obj[prop];
  } else {
   throw '[Error] 出现错误'
  }
  },
 }
 return expressionMap[node.operator]();
 },

 UpdateExpression(node: t.UpdateExpression, scope) {
 const { prefix, argument, operator } = node;
 let $var: IVariable;
 if (argument.type === 'Identifier') {
  $var = scope.$find(argument.name);
  if (!$var) throw `${argument.name} 未定义`;
 } else if (argument.type === 'MemberExpression') {
  const obj = evaluate(argument.object, scope);
  let prop;
  if (argument.computed) {
  prop = evaluate(argument.property, scope);
  } else {
  prop = argument.property.name;
  }
  $var = {
  $set(value: any) {
   obj[prop] = value;
   return true;
  },
  $get() {
   return obj[prop];
  }
  }
 } else {
  throw '[Error] 出现错误'
 }

 const expressionMap = {
  '++': v => {
  $var.$set(v + 1);
  return prefix ? ++v : v++
  },
  '--': v => {
  $var.$set(v - 1);
  return prefix ? --v : v--
  },
 }

 return expressionMap[operator]($var.$get());
 },

 BinaryExpression(node: t.BinaryExpression, scope) {
 const { left, operator, right } = node;
 const expressionMap = {
  '==': (a, b) => a == b,
  '===': (a, b) => a === b,
  '>': (a, b) => a > b,
  '<': (a, b) => a < b,
  '!=': (a, b) => a != b,
  '!==': (a, b) => a !== b,
  '>=': (a, b) => a >= b,
  '<=': (a, b) => a <= b,
  '<<': (a, b) => a << b,
  '>>': (a, b) => a >> b,
  '>>>': (a, b) => a >>> b,
  '+': (a, b) => a + b,
  '-': (a, b) => a - b,
  '*': (a, b) => a * b,
  '/': (a, b) => a / b,
  '&': (a, b) => a & b,
  '%': (a, b) => a % b,
  '|': (a, b) => a | b,
  '^': (a, b) => a ^ b,
  'in': (a, b) => a in b,
  'instanceof': (a, b) => a instanceof b,
 }
 return expressionMap[operator](evaluate(left, scope), evaluate(right, scope));
 },

 AssignmentExpression(node: t.AssignmentExpression, scope) {
 const { left, right, operator } = node;
 let $var: IVariable;

 if (left.type === 'Identifier') {
  $var = scope.$find(left.name);
  if(!$var) throw `${left.name} 未定义`;
 } else if (left.type === 'MemberExpression') {
  const obj = evaluate(left.object, scope);
  let prop;
  if (left.computed) {
  prop = evaluate(left.property, scope);
  } else {
  prop = left.property.name;
  }
  $var = {
  $set(value: any) {
   obj[prop] = value;
   return true;
  },
  $get() {
   return obj[prop];
  }
  }
 } else {
  throw '[Error] 出现错误'
 }

 const expressionMap = {
  '=': v => { $var.$set(v); return $var.$get() },
  '+=': v => { $var.$set($var.$get() + v); return $var.$get() },
  '-=': v => { $var.$set($var.$get() - v); return $var.$get() },
  '*=': v => { $var.$set($var.$get() * v); return $var.$get() },
  '/=': v => { $var.$set($var.$get() / v); return $var.$get() },
  '%=': v => { $var.$set($var.$get() % v); return $var.$get() },
  '<<=': v => { $var.$set($var.$get() << v); return $var.$get() },
  '>>=': v => { $var.$set($var.$get() >> v); return $var.$get() },
  '>>>=': v => { $var.$set($var.$get() >>> v); return $var.$get() },
  '|=': v => { $var.$set($var.$get() | v); return $var.$get() },
  '&=': v => { $var.$set($var.$get() & v); return $var.$get() },
  '^=': v => { $var.$set($var.$get() ^ v); return $var.$get() },
 }

 return expressionMap[operator](evaluate(right, scope));
 },

 LogicalExpression(node: t.LogicalExpression, scope) {
 const { left, right, operator } = node;
 const expressionMap = {
  '&&': () => evaluate(left, scope) && evaluate(right, scope),
  '||': () => evaluate(left, scope) || evaluate(right, scope),
 }
 return expressionMap[operator]();
 },

 MemberExpression(node: t.MemberExpression, scope) {
 const { object, property, computed } = node;
 const obj = evaluate(object, scope);
 let prop;
 if (computed) {
  prop = evaluate(property, scope);
 } else {
  prop = property.name;
 }
 return obj[prop];
 },

 ConditionalExpression(node: t.ConditionalExpression, scope) {
 const { test, consequent, alternate } = node;
 return evaluate(test, scope) ? evaluate(consequent, scope) : evaluate(alternate, scope);
 },

 CallExpression(node: t.CallExpression, scope) {
 const func = evaluate(node.callee, scope);
 const args = node.arguments.map(arg => evaluate(arg, scope));
 let _this;
 if (node.callee.type === 'MemberExpression') {
  _this = evaluate(node.callee.object, scope);
 } else {
  const $var = scope.$find('this');
  _this = $var ? $var.$get() : null;
 }
 return func.apply(_this, args);
 },

 NewExpression(node: t.NewExpression, scope) {
 const func = evaluate(node.callee, scope);
 const args = node.arguments.map(arg => evaluate(arg, scope));
 return new (func.bind(func, ...args));
 },

 SequenceExpression(node: t.SequenceExpression, scope) {
 let last;
 node.expressions.forEach(expr => {
  last = evaluate(expr, scope);
 })
 return last;
 },
}

以上,evaluate-apply 这个过程就完了。

scope

我们再来看下 scope 该如何实现。

class Scope implements IScope {
 public readonly variables: EmptyObj = Object.create(null);

 constructor(
 private readonly scopeType: ScopeType,
 private parent: Scope = null,
 public readonly shared = false,
 ) { }
}

我们构造一个类来模拟 scope。可以看到,Scope 类包含了以下4个属性:

  • variables:当前环境下存在的变量
  • scopeType:当前环境的type
  • parent:当前环境的父环境
  • shared:有些时候不需要重复构造子环境,故用此标识

接下来我们看下该如何在环境中声明变量

首先构造一个类来模拟变量

class Variable implements IVariable {
 constructor(
 private kind: Kind,
 private value: any
 ){ }

 $get() {
 return this.value
 }

 $set(value: any) {
 if (this.kind === 'const') {
  return false
 }
 this.value = value;
 return true;
 }
}

这个类中有两个属性和两个方法

  • kind 用于标识该变量是通过 var、let 还是 const 声明
  • value 表示该变量的值
  • $get 和 $set 分别用于获取和设置该变量的值

有了 Variable 类之后,我们就可以编写 Scope 类中的声明变量的方法了。

let 和 const 的声明方式基本一样

$const(varName: string, value: any) {
 const variable = this.variables[varName];
 if (!variable) {
 this.variables[varName] = new Variable('const', value);
 return true;
 }
 return false;
}

$let(varName: string, value: any) {
 const variable = this.variables[varName];
 if (!variable) {
 this.variables[varName] = new Variable('let', value);
 return true;
 }
 return false;
}

var 的声明方式稍微有一点差异,因为js中,除了在 function 中,用var 声明的变量是会被声明到父级作用域的(js的历史遗留坑)。我们看下代码

$var(varName: string, value: any) {
 let scope: Scope = this;
 while (!!scope.parent && scope.scopeType !== 'function') {
 scope = scope.parent;
 }
 const variable = scope.variables[varName];
 if (!variable) {
 scope.variables[varName] = new Variable('var', value);
 } else {
 scope.variables[varName] = variable.$set(value);
 }
 return true
}

除了声明,我们还需要一个寻找变量的方法,该方法会从当前环境开始,一直沿着作用域链,找到最外层的环境为止。因此,代码实现如下

$find(varName: string): null | IVariable {
 if (Reflect.has(this.variables, varName)) {
 return Reflect.get(this.variables, varName);
 }
 if (this.parent) {
 return this.parent.$find(varName);
 }
 return null;
}

以上,一个基本的javascript元循环求值器就完成了

最后

大家可以在 codesandbox 在线体验一下。
完整的项目地址是:nvwajs,欢迎鞭策,欢迎star。

参考

《SICP》
微信小程序也要强行热更代码,鹅厂不服你来肛我呀

到此这篇关于编写一个javascript元循环求值器的方法的文章就介绍到这了,更多相关javascript元循环求值器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
jquery里的each使用方法详解
Dec 22 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
jquery操作select方法汇总
Feb 05 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 #Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 #Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 #Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 #Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 #Javascript
vue cli3适配所有端方案的实现
Apr 13 #Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 #Javascript
You might like
删除无限级目录与文件代码共享
2006/07/12 PHP
php 空格,换行,跳格使用说明
2009/12/18 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
Javascript !!的作用
2008/12/04 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
实例说明Python中比较运算符的使用
2015/05/13 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python三级目录展示的实现方法
2016/09/28 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
个人充满哲理的自我评价
2014/02/20 职场文书
C++程序员求职信
2014/05/07 职场文书
2014年电教工作总结
2014/12/19 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
创业计划书之酒厂
2019/10/14 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
MySQL分区路径子分区再分区
2022/04/13 MySQL