這次給大家帶來JS怎樣實現運算符重載，JS實現運算符重載的注意事項有哪些，下面就是實戰案例，一起來看一下。

最近要做數據處理，自定義了一些數據結構，比如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(/["]+[^"]*["]+|[']+[^']*[']+|\*\*|\+|-|\*|\/|\(|\)|\?|>[=]|

let ops = tmp_code.match(/["]+[^"]*["]+|[']+[^']*[']+|\*\*|\+|-|\*|\/|\(|\)|\?|>[=]|

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)

&& !/\*\*|\+|-|\*|\/|\(|\?|>[=]|

&& !/^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腳本的方式使用，像這樣

let a = a+b // a、b為對象實例

還有就是將代碼作為參數傳入$$方法，該方法編譯代碼并執行，如下：static $(fn) {

if(!(fn instanceof Function)){

throw '參數錯誤'

}

(new Function(translate_block('function',fn.toString()))).call(window)()

}

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

推薦閱讀：

總結

以上是生活随笔為你收集整理的php如何实现运算符重载,JS怎样实现运算符重载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。