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中.attr()和.prop()的问题探讨
Sep 06 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
Vue通过provide inject实现组件通信
Sep 03 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
咖啡的化学
2021/03/03 咖啡文化
destoon二次开发常用数据库操作
2014/06/21 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
PHP会话处理的10个函数
2015/08/11 PHP
简单JS代码压缩器
2006/10/12 Javascript
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
Node.js模块加载详解
2014/08/16 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
Python转换时间的图文方法
2019/07/01 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
高中历史教学反思
2014/02/08 职场文书
拔河比赛新闻稿
2015/07/17 职场文书