Implement an AOP by extending Function.prototype

AOP (Aspect Oriented Programming) mainly extracts some functions unrelated to the core business logic module. These functions usually include log statistics, security control, or exception handling and so on.

What we need to do is to extend Function.prototype to "dynamically implant" it into the business logic module, keeping the business logic pure and cohesive.

Now we have a function

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

So how do we implant a function and let it execute before this function executes?

Now let's extend a before function.

        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 

At this point, we will find that before executing the myFunc function, we will execute the code in the before function.

Now we can use it to reuse functional modules such as log statistics.

Of course, we can also use it as a filter.

For example, when passing in, the incoming parameters are first sorted by the sort function (note: sort sorting is not stable):

        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 

Write a before, then after is also simple:

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 

Well, after we implant these two functions globally, we can happily .before().after() directly behind other functions in the future.