運算子重載應如何使用

這次帶給大家運算子重載應如何使用，運算子重載使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

最近要做資料處理，自訂了一些資料結構，像是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.__pide__ != undefined) {
      return target.__pide__(a, b)
    }else {
      throw target.toString() + '\n未定义__pide__方法'
    }
  } 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_pide__ != undefined) {
      return target.__dot_pide__(a, b)
    }else {
      throw target.toString() + '\n未定义__dot_pide__方法'
    }
  } 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(/["]+[^"]*["]+|[']+[^']*[']+|\*\*|\+|-|\*|\/|\(|\)|\?|>[=]|[=]|[=]| {
    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 <p style="text-align: left;">對於新的類，我們只要繼承OOkay類別就可以在該類中使用運算子重載。對於繼承自非OOkay類別的，我們可以採用注入的方式,如下：</p><pre class="brush:php;toolbar:false">/**
   * 非继承类的注入方法
   * @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腳本的方式使用，像這樣

還有就是將程式碼作為參數傳入__$$__方法，該方法編譯程式碼並執行，如下：

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

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue Nuxt.js做出服務端渲染

##Angular使用HMR程式碼解析

以上是運算子重載應如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！