通过拓展Function.prototype实现一个AOP

leone 发布于2019-08-20 18:54 / 442人阅读

摘要：执行原函数先输出再输出此时，我们会发现在执行这个函数之前，我们会先执行函数里得代码。执行原函数先执行原函数，也就是再执行新函数输出先输出再输出最后输出好了，我们在全局植入了这两个函数之后，以后都可以开心的直接在别的函数后面了。

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实现实时视频通信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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