這篇文章將為大家詳細(xì)講解有關(guān)Javascript實(shí)現(xiàn)運(yùn)算符重載的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)一直通過(guò)網(wǎng)站建設(shè)和網(wǎng)站營(yíng)銷幫助企業(yè)獲得更多客戶資源。 以"深度挖掘，量身打造，注重實(shí)效"的一站式服務(wù)，以網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、移動(dòng)互聯(lián)產(chǎn)品、網(wǎng)絡(luò)營(yíng)銷推廣服務(wù)為核心業(yè)務(wù)。10年網(wǎng)站制作的經(jīng)驗(yàn)，使用新網(wǎng)站建設(shè)技術(shù)，全新開(kāi)發(fā)出的標(biāo)準(zhǔn)網(wǎng)站，不但價(jià)格便宜而且實(shí)用、靈活，特別適合中小公司網(wǎng)站制作。網(wǎng)站管理系統(tǒng)簡(jiǎn)單易用，維護(hù)方便，您可以完全操作網(wǎng)站資料，是中小公司快速網(wǎng)站建設(shè)的選擇。

最近要做數(shù)據(jù)處理，自定義了一些數(shù)據(jù)結(jié)構(gòu)，比如Mat,Vector,Point之類的，對(duì)于加減乘除之類的四則運(yùn)算還要重復(fù)定義，代碼顯得不是很直觀，javascript沒(méi)有運(yùn)算符重載這個(gè)像C++、C#之類的功能的確令人不爽，于是想“曲線救國(guó)”，自動(dòng)將翻譯代碼實(shí)現(xiàn)運(yùn)算符重載，實(shí)現(xiàn)思路其實(shí)很簡(jiǎn)單，就是編寫(xiě)一個(gè)解釋器，將代碼編譯。例如：

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

翻譯成

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

在replace函數(shù)中我們調(diào)用對(duì)象相應(yīng)的運(yùn)算符函數(shù),replace函數(shù)代碼如下：

/**
 * 轉(zhuǎn)換方法
 * @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 '不同類型的對(duì)象不能使用四則運(yùn)算'
  }
  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 + '運(yùn)算符無(wú)法識(shí)別'
  }
}

replace實(shí)現(xiàn)非常簡(jiǎn)單，不做過(guò)多解釋，重要的部分是如何實(shí)現(xiàn)代碼的編譯。大學(xué)學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)時(shí)四則運(yùn)算的實(shí)現(xiàn)就是這翻譯的基礎(chǔ)，略微有些差異。簡(jiǎn)單描述一下流程：

1、分割表達(dá)式，提取變量和運(yùn)算符獲得元數(shù)組A
2、遍歷元數(shù)組

如果元素是運(yùn)算符加減乘除，則從堆棧中彈出上一個(gè)元素，轉(zhuǎn)換為replace(last,操作符,
如果元素是‘）',則從堆棧中彈出元素，拼接直到遇到'('，并壓入堆棧。這里需要注意‘（'元素前是否為函數(shù)調(diào)用或replace，如果是函數(shù)調(diào)用或replace，則需要繼續(xù)向前彈出數(shù)據(jù)，閉合replace函數(shù)的閉合。
如果是一般元素，則查看前一個(gè)元素是否replace，如果是，則需要拼接‘)'使得replace函數(shù)閉合，否則直接將元素壓入棧。

3、將2步驟中得到的棧順序組合就得到編譯后的表達(dá)式。

依據(jù)上述流程，實(shí)現(xiàn)代碼：

/**
 * 表達(dá)式轉(zhuǎn)換工具方法
 * @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
}

表達(dá)式編譯的方法寫(xiě)好了，接下來(lái)就是如何使編寫(xiě)的代碼被我們的翻譯機(jī)翻譯，也就是需要一個(gè)容器，兩種方法：一種就是類構(gòu)造器重新定義方法屬性，另一種就是將代碼作為參數(shù)傳入我們自定義的方法。接下來(lái)介紹一下類構(gòu)造器中重新定義方法：

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在構(gòu)造器中重新定義了，translate_block是對(duì)整個(gè)代碼塊分割得到進(jìn)行翻譯，代碼如下：

/**
 * 類代碼塊轉(zhuǎn)換工具
 * @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')
}

對(duì)于新的類，我們只要繼承OOkay類就可以在該類中使用運(yùn)算符重載。對(duì)于繼承自非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)
        })
      }
    })
  }

對(duì)于非類中的代碼，我們需要一個(gè)容器，這里我采用了兩種方式，一種以ookay腳本的方式使用，像這樣
<script type='text/ookayscript'>
let a = a+b // a、b為對(duì)象實(shí)例
</script>
還有就是將代碼作為參數(shù)傳入__$$__方法，該方法編譯代碼并執(zhí)行，如下：

static __$__(fn) {
    if(!(fn instanceof Function)){
      throw '參數(shù)錯(cuò)誤'
    }
    (new Function(translate_block('function',fn.toString()))).call(window)()
  }

關(guān)于“Javascript實(shí)現(xiàn)運(yùn)算符重載的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

標(biāo)題名稱：Javascript實(shí)現(xiàn)運(yùn)算符重載的方法
當(dāng)前鏈接：http://chinadenli.net/article8/gddcip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、軟件開(kāi)發(fā)、面包屑導(dǎo)航、Google、網(wǎng)站導(dǎo)航、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)