通過拓展Function.prototype實現一個AOP

leone 發布于2019-08-20 18:54 / 440人閱讀

摘要：執行原函數先輸出再輸出此時，我們會發現在執行這個函數之前，我們會先執行函數里得代碼。執行原函數先執行原函數，也就是再執行新函數輸出先輸出再輸出最后輸出好了，我們在全局植入了這兩個函數之后，以后都可以開心的直接在別的函數后面了。

AOP(面向切面的編程)主要是將一些與核心業務邏輯模塊無關的功能抽離出來，這些功能通常包括日志統計，安全控制，或者是異常處理等等。

我們要做的就是拓展Function.prototype來“動態植入”到業務的邏輯模塊兒中，保持業務邏輯的純凈和高內聚。

現在我們有一個函數

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

那我們如何植入一個函數，讓他在這個函數執行之前執行呢？

現在我們來拓展一個before函數。

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

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

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

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

此時，我們會發現在執行myFunc這個函數之前，我們會先執行before函數里得代碼。

現在我們就可以開森得用它來復用日志統計等功能模塊。

當然，我們也可以把他當作一個過濾器來使用。

比如在傳入得時候，傳入得參數先用sort函數排序（注意：sort排序并不穩定）:

        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;       //用來保存調用這個函數的引用，如myFunc調用此函數，則_this指向myFunc
            return function(){      //返回一個函數，相當于一個代理函數，也就是說，這里包含了原函數和新函數，原函數指的是myFunc，新函數指的是fn
                fn.apply(this,arguments);   //修正this的指向，將this指針指向fn，將myFunc接收的參數傳給fn處理。
                return _this.apply(this,arguments);     //執行原函數
            }
        }

        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

寫出了一個before了，那么after也簡單了：

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;       //用來保存調用這個函數的引用，如myFunc調用此函數，則_this指向myFunc
    return function(){      //返回一個函數，相當于一個代理函數，也就是說，這里包含了原函數和新函數，原函數指的是myFunc，新函數指的是fn
        fn.apply(this,arguments);   //修正this的指向，將this指針指向fn，將myFunc接收的參數傳給fn處理。
        return _this.apply(this,arguments);     //執行原函數
    }
}

Function.prototype.after = function(fn){
    var _this = this;
    return function(){
        var r = _this.apply(this,arguments); //先執行原函數，也就是myFunc
        fn.apply(this,arguments);   //再執行新函數
        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

好了，我們在全局植入了這兩個函數之后，以后都可以開心的直接在別的函數后面.before().after()了。

GPU云服務器云服務器通過消息隊列實現通過c語言實現呼吸燈通過vps怎么實現動態ip 通過webrtc實現實時視頻通信

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84852.html

獨家解析Javascript原型繼承 - 之函數原型和AOP

摘要：引子獨家解析原型繼承已經比較全面的分析了自定義函數類型，內置基本類和內置對象類型的的以及的原型鏈。鑒于函數是的一等公民，另辟新篇介紹函數的原型及其應用。函數本身也是對象，它遵循獨家解析原型繼承所描述的自定義函數類型對象的原型法則。引子獨家解析Javascript原型繼承已經比較全面的分析了自定義函數類型，JS內置基本類(undefined, null, bool, number, ...

ispring 2019-08-20 18:02 評論0 收藏0
修飾器模式

摘要：更多前端技術和知識點，搜索訂閱號菌訂閱不會改變原有的對象，而是在其基礎上進行拓展。 showImg(https://segmentfault.com/img/remote/1460000019865720?w=640&h=645); ?? 更多前端技術和知識點，搜索訂閱號 JS 菌訂閱不會改變原有的對象，而是在其基礎上進行拓展。實現原理創建一個 A 類 A 類中的屬性和方法使...

Salamander 2019-08-26 10:20 評論0 收藏0
初識AOP（面向切面編程）

摘要：初識面向切面編程的定義是什么目前自己的理解是把一個函數動態的的插入到另外一個函數當中，就像一個鉤子一樣。面向切面編程是的首字母縮寫，我們知道，面向對象的特點是繼承多態和封裝。初識AOP（面向切面編程） AOP的定義 AOP是什么？目前自己的理解是把一個函數‘動態的的插入’到另外一個函數當中，就像一個鉤子一樣。下面是詳細的定義。面向切面編程（AOP是Aspect Oriented ...

Lavender 2019-08-20 14:24 評論0 收藏0
學學AOP之裝飾者模式

摘要：但是，這樣做的后果就是，我們會不斷的改變本體，就像把鳳姐送去做整形手術一樣。在中，我們叫做引用裝飾。所以，這里引入的裝飾模式裝飾親切，熟悉，完美。實例講解裝飾上面那個例子，只能算是裝飾模式的一個不起眼的角落。裝飾者，英文名叫decorator. 所謂的裝飾,從字面可以很容易的理解出，就是給土肥圓，化個妝，華麗的轉身為白富美，但本體還是土肥圓。說人話.咳咳~ 在js里面一切都是對...

nihao 2019-08-19 17:28 評論0 收藏0
JavaScript中高階函數的魅力

摘要：上傳進度下面通過高階函數的方式我們來實現函數節流節流函數計時器是否是第一次調用首次調用直接放行存在計時器就攔截設置使用節流分時函數節流函數為我們提供了一種限制函數被頻繁調用的解決方案。高階函數是指至少滿足下列條件之一的函數 1：函數可以作為參數被傳遞 2：函數可以作為返回值輸出 JavaScript語言中的函數顯然的是滿足了高階函數的條件，下面我們一起來探尋JavaScript種高階...

Tony_Zby 2019-08-23 11:41 評論0 收藏0