JavaScript钩子函数和AOP

原文：https://blog.csdn.net/shuixiou1/article/details/82013207
废话不多说，直接上demo

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head>
<body>
    <!-- 一、钩子函数，即正常运行原函数的基础上扩展功能。 -->
    <!-- 1.1 范例1：采用闭包的方式的钩子函数 -->
    <script>
        function sum(a,b){
            return a+b;
        }
		
        var wrap = (function(fn){
            return function(){ // 返回包装的函数，运行时将包装函数this传入原函数。
                console.log("开始计算前")
                var res = fn.apply(this,arguments);
                console.log("计算结果"+res);
                console.log("开始计算后")
                return res;
            }
        })(sum);
	
        wrap(1,2);
    </script>
	
    <!-- 1.2 范例2：如何安全的扩展一些自带的函数，比如Number.prototype.toString-->
    <script>
        Number.prototype.toString = (function(fn){
            return function(radix,length){
                var res = fn.apply(this,arguments); //实际功能
                res = res.toUpperCase();//扩展功能
                return res;
            }
        })(Number.prototype.toString);
	
        console.log(new Number(255).toString(16)); //FF 原本应该为ff
    </script>
 
    <!-- 二、采用Aop的方式-->
    <script>
        //给Function加的方法，所有的函数或方法都可以调用before,传入一个fn的方法参数进行扩展。
        Function.prototype.before = function(fn) {
            var __self = this; //原型内的this，即Function的实例--实际我们要扩展的函数。
            return function() {
                fn.apply(this, arguments);
                return __self.apply(this, arguments); 
            }
        }
		
        Function.prototype.after = function(fn) {
            var __self = this;
            return function() {
                var ret = __self.apply(this, arguments);
                fn.apply(this, arguments);
                return ret;
            }
        }
		
        //测试 (我们上面域的sum还在)
        var aopSum = sum.before(function(){console.log("执行前")}).after(function(){console.log("执行后")});
        aopSum(1,3);
    </script>
 
</body></html>
JavaScript钩子函数和AOP

废话不多说，直接上demo

猜你喜欢
