JavaScript鉤子函式和AOP
阿新 • • 發佈：2018-12-01
原文：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>