通過(guò)拓展Function.prototype實(shí)現(xiàn)一個(gè)AOP

leone 發(fā)布于2019-08-20 18:54 / 445人閱讀

摘要：執(zhí)行原函數(shù)先輸出再輸出此時(shí)，我們會(huì)發(fā)現(xiàn)在執(zhí)行這個(gè)函數(shù)之前，我們會(huì)先執(zhí)行函數(shù)里得代碼。執(zhí)行原函數(shù)先執(zhí)行原函數(shù)，也就是再執(zhí)行新函數(shù)輸出先輸出再輸出最后輸出好了，我們?cè)谌种踩肓诉@兩個(gè)函數(shù)之后，以后都可以開心的直接在別的函數(shù)后面了。

AOP(面向切面的編程)主要是將一些與核心業(yè)務(wù)邏輯模塊無(wú)關(guān)的功能抽離出來(lái)，這些功能通常包括日志統(tǒng)計(jì)，安全控制，或者是異常處理等等。

我們要做的就是拓展Function.prototype來(lái)“動(dòng)態(tài)植入”到業(yè)務(wù)的邏輯模塊兒中，保持業(yè)務(wù)邏輯的純凈和高內(nèi)聚。

現(xiàn)在我們有一個(gè)函數(shù)

var myFunc = function(){
    console.log(1);
}
myFunc();  //1

那我們?nèi)绾沃踩胍粋€(gè)函數(shù)，讓他在這個(gè)函數(shù)執(zhí)行之前執(zhí)行呢？

現(xiàn)在我們來(lái)拓展一個(gè)before函數(shù)。

        var myFunc = function(){
            console.log(1);
        }

        Function.prototype.before = function(fn){
            var _this = this;       //用來(lái)保存調(diào)用這個(gè)函數(shù)的引用，如myFunc調(diào)用此函數(shù)，則_this指向myFunc
            return function(){      //返回一個(gè)函數(shù)，相當(dāng)于一個(gè)代理函數(shù)，也就是說(shuō)，這里包含了原函數(shù)和新函數(shù)，原函數(shù)指的是myFunc，新函數(shù)指的是fn
                fn.apply(this,arguments);   //修正this的指向，將this指針指向fn，將myFunc接收的參數(shù)傳給fn處理。
                return _this.apply(this,arguments);     //執(zhí)行原函數(shù)
            }
        }

        myFunc = myFunc.before(function(){
            console.log(2);
        });

        myFunc([3,2,1]);   //先輸出2,再輸出1

此時(shí)，我們會(huì)發(fā)現(xiàn)在執(zhí)行myFunc這個(gè)函數(shù)之前，我們會(huì)先執(zhí)行before函數(shù)里得代碼。

現(xiàn)在我們就可以開森得用它來(lái)復(fù)用日志統(tǒng)計(jì)等功能模塊。

當(dāng)然，我們也可以把他當(dāng)作一個(gè)過(guò)濾器來(lái)使用。

比如在傳入得時(shí)候，傳入得參數(shù)先用sort函數(shù)排序（注意：sort排序并不穩(wěn)定）:

        var myFunc = function(arr){
            console.log(1);
            console.log(arr);   //輸出 [1, 2, 2, 3, 4, 6, 7]
        }

        Function.prototype.before = function(fn){
            var _this = this;       //用來(lái)保存調(diào)用這個(gè)函數(shù)的引用，如myFunc調(diào)用此函數(shù)，則_this指向myFunc
            return function(){      //返回一個(gè)函數(shù)，相當(dāng)于一個(gè)代理函數(shù)，也就是說(shuō)，這里包含了原函數(shù)和新函數(shù)，原函數(shù)指的是myFunc，新函數(shù)指的是fn
                fn.apply(this,arguments);   //修正this的指向，將this指針指向fn，將myFunc接收的參數(shù)傳給fn處理。
                return _this.apply(this,arguments);     //執(zhí)行原函數(shù)
            }
        }

        myFunc = myFunc.before(function(arr){
            console.log(2);
            console.log(arr);   //輸出 [3, 2, 1, 6, 2, 7, 4]
            arr.sort();
        });

        myFunc([3,2,1,6,2,7,4]);   //先輸出2,再輸出1

寫出了一個(gè)before了，那么after也簡(jiǎn)單了：

var myFunc = function(arr){
    console.log(1);
    console.log(arr);   //輸出 [1, 2, 2, 3, 4, 6, 7]
}

Function.prototype.before = function(fn){
    var _this = this;       //用來(lái)保存調(diào)用這個(gè)函數(shù)的引用，如myFunc調(diào)用此函數(shù)，則_this指向myFunc
    return function(){      //返回一個(gè)函數(shù)，相當(dāng)于一個(gè)代理函數(shù)，也就是說(shuō)，這里包含了原函數(shù)和新函數(shù)，原函數(shù)指的是myFunc，新函數(shù)指的是fn
        fn.apply(this,arguments);   //修正this的指向，將this指針指向fn，將myFunc接收的參數(shù)傳給fn處理。
        return _this.apply(this,arguments);     //執(zhí)行原函數(shù)
    }
}

Function.prototype.after = function(fn){
    var _this = this;
    return function(){
        var r = _this.apply(this,arguments); //先執(zhí)行原函數(shù)，也就是myFunc
        fn.apply(this,arguments);   //再執(zhí)行新函數(shù)
        return r;
    }
}
myFunc = myFunc.before(function(arr){
    console.log(2);
    console.log(arr);   //輸出 [3, 2, 1, 6, 2, 7, 4]
    arr.sort();
}).after(function(arr){
    console.log(3);
});

myFunc([3,2,1,6,2,7,4]);   //先輸出2,再輸出1,最后輸出3

好了，我們?cè)谌种踩肓诉@兩個(gè)函數(shù)之后，以后都可以開心的直接在別的函數(shù)后面.before().after()了。

GPU云服務(wù)器云服務(wù)器通過(guò)消息隊(duì)列實(shí)現(xiàn) 通過(guò)c語(yǔ)言實(shí)現(xiàn)呼吸燈通過(guò)vps怎么實(shí)現(xiàn)動(dòng)態(tài)ip 通過(guò)webrtc實(shí)現(xiàn)實(shí)時(shí)視頻通信

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/84852.html