Javascript实现运算符重载详解


Posted in Javascript onApril 07, 2018

最近要做数据处理,自定义了一些数据结构,比如Mat,Vector,Point之类的,对于加减乘除之类的四则运算还要重复定义,代码显得不是很直观,javascript没有运算符重载这个像C++、C#之类的功能的确令人不爽,于是想“曲线救国”,自动将翻译代码实现运算符重载,实现思路其实很简单,就是编写一个解释器,将代码编译。例如:

S = A + B (B - C.fun())/2 + D

翻译成

`S = replace(replace(A, '+', replace(replace(B,'',(replace(B,'-',C.fun())))),'/',2),'+',D)`

在replace函数中我们调用对象相应的运算符函数,replace函数代码如下:

/**
 * 转换方法
 * @param a
 * @param op
 * @param b
 * @returns {*}
 * @private
 */
export function __replace__(a,op,b){
  if(typeof(a) != 'object' && typeof(b) != 'object'){
    return new Function('a','b','return a' + op + 'b')(a,b)
  }
  if(!Object.getPrototypeOf(a).isPrototypeOf(b)
    && Object.getPrototypeOf(b).isPrototypeOf(a)){
    throw '不同类型的对象不能使用四则运算'
  }
  let target = null
  if (Object.getPrototypeOf(a).isPrototypeOf(b)) {
    target = new Function('return ' + b.__proto__.constructor.name)()
  }
  if (Object.getPrototypeOf(b).isPrototypeOf(a)) {
    target = new Function('return ' + a.__proto__.constructor.name)()
  }
  if (op == '+') {
    if (target.__add__ != undefined) {
      return target.__add__(a, b)
    }else {
      throw target.toString() +'\n未定义__add__方法'
    }
  }else if(op == '-') {
    if (target.__plus__ != undefined) {
      return target.__plus__(a, b)
    }else {
      throw target.toString() + '\n未定义__plus__方法'
    }
  }else if(op == '*') {
    if (target.__multiply__ != undefined) {
      return target.__multiply__(a, b)
    }else {
      throw target.toString() + '\n未定义__multiply__方法'
    }
  } else if (op == '/') {
    if (target.__divide__ != undefined) {
      return target.__divide__(a, b)
    }else {
      throw target.toString() + '\n未定义__divide__方法'
    }
  } else if (op == '%') {
    if (target.__mod__ != undefined) {
      return target.__mod__(a, b)
    }else {
      throw target.toString() + '\n未定义__mod__方法'
    }
  } else if(op == '.*') {
    if (target.__dot_multiply__ != undefined) {
      return target.__dot_multiply__(a, b)
    }else {
      throw target.toString() + '\n未定义__dot_multiply__方法'
    }
  } else if(op == './') {
    if (target.__dot_divide__ != undefined) {
      return target.__dot_divide__(a, b)
    }else {
      throw target.toString() + '\n未定义__dot_divide__方法'
    }
  } else if(op == '**') {
    if (target.__power__ != undefined) {
      return target.__power__(a, b)
    }else {
      throw target.toString() + '\n未定义__power__方法'
    }
  }else {
    throw op + '运算符无法识别'
  }
}

replace实现非常简单,不做过多解释,重要的部分是如何实现代码的编译。大学学习数据结构时四则运算的实现就是这翻译的基础,略微有些差异。简单描述一下流程:

1、分割表达式,提取变量和运算符获得元数组A
2、遍历元数组

如果元素是运算符加减乘除,则从堆栈中弹出上一个元素,转换为replace(last,操作符,
如果元素是‘)',则从堆栈中弹出元素,拼接直到遇到'(',并压入堆栈。这里需要注意‘('元素前是否为函数调用或replace,如果是函数调用或replace,则需要继续向前弹出数据,闭合replace函数的闭合。
如果是一般元素,则查看前一个元素是否replace,如果是,则需要拼接‘)'使得replace函数闭合,否则直接将元素压入栈。

3、将2步骤中得到的栈顺序组合就得到编译后的表达式。

依据上述流程,实现代码:

/**
 * 表达式转换工具方法
 * @param code
 */
export function translate (code) {
  let data = []
  let tmp_code = code.replace(/\s/g,'')
  let tmp = []
  let vari = tmp_code.split(/["]+[^"]*["]+|[']+[^']*[']+|\*\*|\+|-|\*|\/|\(|\)|\?|>[=]|<[=]|={2}|:|&{2}|\|{2}|\{|\}|=|%|\.\/|\.\*|,/g)
  let ops = tmp_code.match(/["]+[^"]*["]+|[']+[^']*[']+|\*\*|\+|-|\*|\/|\(|\)|\?|>[=]|<[=]|={2}|:|&{2}|\|{2}|\{|\}|=|%|\.\/|\.\*|,/g)
  for (let i = 0,len = ops.length; i < len; i++) {
    if (vari[i] != '') {
      tmp.push(vari[i])
    }
    if (ops[i] != '') {
      tmp.push(ops[i])
    }
  }
  tmp.push(vari[ops.length])
  for (let i = 0; i < tmp.length; i++){
    let item = tmp[i]
    if(/\*\*|\+|-|\*|\/|%|\.\/|\.\*/.test(tmp[i])) {
      let top = data.pop()
      let trans = '__replace__(' + top + ',\'' + tmp[i] + '\','
      data.push(trans)
    }else{
      if (')' == tmp[i]) {
        let trans0 = tmp[i]
        let top0 = data.pop()
        while (top0 != '(') {
          trans0 = top0 + trans0
          top0 = data.pop()
        }
        trans0 = top0 + trans0
        let pre = data[data.length - 1]
        while(/[_\w]+[\.]?[_\w]+/.test(pre)
        && !/^__replace__\(/.test(pre)
        && pre != undefined) {
          pre = data.pop()
          trans0 = pre + trans0
          pre = data[data.length - 1]
        }
        pre = data[data.length - 1]
        while(pre != undefined
        && /^__replace__\(/.test(pre)){
          pre = data.pop()
          trans0 = pre + trans0 + ')'
          pre = data[data.length - 1]
        }
        data.push(trans0)
      }else {
        let pre = data[data.length - 1]
        let trans1 = tmp[i]
        while(pre != undefined
        && /^__replace__\(/.test(pre)
        && !/\*\*|\+|-|\*|\/|\(|\?|>[=]|<[=]|={2}|:|&{2}|\|{2}|\{|=|\}|%|\.\/|\.\*/.test(item)
        && !/^__replace__\(/.test(item)) {
          if(tmp[i + 1] == undefined){
            pre = data.pop()
            trans1 = pre + trans1 + ')'
            break;
          }else{
            pre = data.pop()
            trans1 = pre + trans1 + ')'
            pre = data[data.length - 1]
          }

        }
        data.push(trans1)

      }
    }
  }
  let result = ''
  data.forEach((value, key, own) => {
    result += value
  })
  return result
}

表达式编译的方法写好了,接下来就是如何使编写的代码被我们的翻译机翻译,也就是需要一个容器,两种方法:一种就是类构造器重新定义方法属性,另一种就是将代码作为参数传入我们自定义的方法。接下来介绍一下类构造器中重新定义方法:

export default class OOkay {
  constructor () {
    let protos = Object.getOwnPropertyNames(Object.getPrototypeOf(this))
    protos.forEach((proto, key, own) => {
      if(proto != 'constructor'){
        Object.defineProperty(this, proto, {
          value:new Function(translate_block(proto, this[proto].toString())).call(this)
        })
      }
    })
  }
}

由上面可以看出,我们使用Object.defineProperty在构造器中重新定义了,translate_block是对整个代码块分割得到进行翻译,代码如下:

/**
 * 类代码块转换工具
 * @param name
 * @param block
 * @returns {string}
 */
export function translate_block (name , block) {
  let codes = block.split('\n')
  let reg = new RegExp('^' + name + '$')
  console.log(reg.source)
  codes[0] = codes[0].replace(name,'function')
  for(let i = 1; i < codes.length; i++) {
    if (codes[i].indexOf('//') != -1) {
      codes[i] = codes[i].substring(0,codes[i].indexOf('//'))
    }
    if(/\*\*|\+|-|\*|\/|%|\.\/|\.\*/g.test(codes[i])){
      if (codes[i].indexOf('return ') != -1) {
        let ret_index = codes[i].indexOf('return ') + 7
        codes[i] = codes[i].substring(0,ret_index) + translate(codes[i].substring(ret_index))
      }else {
        let eq_index = codes[i].indexOf('=') + 1
        codes[i] = codes[i].substring(0,eq_index) + translate(codes[i].substring(eq_index))
      }
    }
  }
  return 'return ' + codes.join('\n')
}

对于新的类,我们只要继承OOkay类就可以在该类中使用运算符重载。对于继承自非OOkay类的,我们可以采用注入的方式,如下:

/**
   * 非继承类的注入方法
   * @param target
   */
  static inject (target) {
    let protos = Object.getOwnPropertyNames(Object.getPrototypeOf(target))
    protos.forEach((proto, key, own) => {
      if (proto != 'constructor') {
        Object.defineProperty(target, proto, {
          value:new Function(translate_block(proto, target[proto].toString())).call(target)
        })
      }
    })
  }

对于非类中的代码,我们需要一个容器,这里我采用了两种方式,一种以ookay脚本的方式使用,像这样
<script type='text/ookayscript'>
let a = a+b // a、b为对象实例
</script>
还有就是将代码作为参数传入__$$__方法,该方法编译代码并执行,如下:

static __$__(fn) {
    if(!(fn instanceof Function)){
      throw '参数错误'
    }
    (new Function(translate_block('function',fn.toString()))).call(window)()
  }

这样就实现了运算符的重载

Javascript 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
vscode中使用npm安装babel的方法
Aug 02 Javascript
Vue中使用Sortable的示例代码
Apr 07 #Javascript
JavaScript实现简单动态进度条效果
Apr 06 #Javascript
js+css实现打字效果
Jun 24 #Javascript
简单介绍react redux的中间件的使用
Apr 06 #Javascript
webpack源码之loader机制详解
Apr 06 #Javascript
vue.js项目nginx部署教程
Apr 05 #Javascript
常用的 JS 排序算法 整理版
Apr 05 #Javascript
You might like
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
php 中的closure用法详解
2017/06/12 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
初学JavaScript第二章
2008/09/30 Javascript
JavaScript 继承详解(一)
2009/07/13 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Python3多线程操作简单示例
2018/05/22 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
详解Python学习之安装pandas
2019/04/16 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
高三政治教学反思
2014/02/06 职场文书
体育专业自荐书
2014/05/29 职场文书
学校四群教育实施方案
2014/06/12 职场文书
投诉信范文
2015/07/02 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技