JavaScript之AOP

最新推荐文章于 2025-04-01 17:59:31 发布

航行在蓝天的蚂蚱

最新推荐文章于 2025-04-01 17:59:31 发布

阅读量327

点赞数

分类专栏： javascript 文章标签： js AOP before after

本文链接：https://blog.youkuaiyun.com/xuyankuanrong/article/details/80774928

版权

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种在JavaScript中实现函数链式调用的方法，通过扩展Function.prototype，定义before和after两个方法来控制函数执行的顺序。首先执行before方法中的函数，再执行原始函数，最后执行after方法中的函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 Function.prototype.before = function (beforefn) {
            var __self = this;

            return function () {
                beforefn.apply(this,arguments);
                __self.apply(this,arguments);
            };
        };

        Function.prototype.after = function (afterfn) {
            var __self = this;
            return function () {
                 __self.apply(this,arguments);
                afterfn.apply(this,arguments);

            };
        };

        var func = function () {
            console.log(2);
        };

        func = func.before(function () {
            console.log(1);
        }).after(function () {
            console.log(3);
        });

        func();//1 2 3

采用链式函数执行体，before函数中的__self.apply(this)指向的是原函数，after函数中__self.apply(this)指向的是before函数执行体。

Function.prototype.before = function (beforeFn) {
                var __self = this;
                return function () {
                    beforeFn.apply(this,arguments);
                    return __self.apply(this,arguments);//执行原函数
                };
            };

            Function.prototype.after = function (afterFn) {
                var __self = this;
                return function () {
                    var ret = __self.apply(this,arguments);//执行原函数
                    afterFn.apply(this,arguments);
                    return ret;
                };
            };

            var func = function () {
                console.log(2);
            };

会先执行after，after中”__self.apply(this,arguments)”会执行原函数，而after的原函数就是before执行的函数，before函数中”beforeFn.apply(this,arguments)”会执行before的参数函数，所以打印出了1，然后”__self.apply(this,arguments)”会执行before的原函数func，所以会打印出2，before执行完毕之后，回到after函数中的”afterFn.apply(this,arguments)”中，会执行after函数的参数函数，所以会打印出3.

 func = func.before(function () {
                console.log(1);
            }).after(function () {
                console.log(3);
            });
      func();//1,2,3