javascript AOP(面向切面编程)

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

Function.prototype.before = function (beforefn) {
//待补全的函数
}
Function.prototype.after = function (afterfn) {
//待补全的函数
};

func=func.before(function () {
  console.log("1");
}).after(function () { //此时,after函数中的this指向func.before
  console.log("3");
})();

实现输出：

这是我在笔试中遇到的题目，结束后，下来查了查，发现是js的一种模式——AOP(面向切面编程)。

什么是AOP?

    AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后， 再通过“动态织入”的方式掺入业务逻辑模块中。

大致了解了其作用后，开始破解题目

Function.prototype.before=function(fn){
    let _self=this;               //this==Function.prototype
    return function beforeFunc(){
      fn.apply(this,arguments);
      _self.apply(this,arguments);
  //  return _self.apply(this,arguments);  //若func有返回值
    }
  }
Function.prototype.after=function(fn){
    let _beforeFunc=this;
    return function afterFunc(){

      _beforeFunc.apply(this,arguments);
    // let res=_beforeFunc.apply(this.argumens);
      fn.apply(this,arguments);
      // return res
    }
  }

 

结合最初的题目，讲解原理：

 

• 在 func.before 执行时，内部的 this 当前指向 func 函数，使用临时变量 __self 保存.令方法返回一个闭包，为方便理解闭包命名为 beforeFunc（可以是匿名的） 。

• beforeClosure 被返回后， after 方法的调用变成了 beforeFunc.after，
  此时，after内部 this 当前指向 beforeFunc，使用临时变量 __beforeClosure 保存。令方法返回一个闭包，命名为 afterFunc。

• 调用 afterFunc()，afterClosure 内部首先调用 beforeFunc 闭包，并把当前 this 和 参数传入 beforeFunc。

• beforeFunc内部首先调用参数 fn, 执行console.log(1) ，然后__self换成func方法，console.log(2),调用过程中的 this 和 arguments 都是 beforeFunc调用时传进来的，与 afterFunc 是一致的。

• beforeFunc执行完毕,执行afterFunc 的第二步（after 参数fn中的函数console.log(3)）

• 若改过程有返回值：beforeFunc执行完毕，返回func的返回值，回到 afterFunc 的第一步，result接收 func函数的返回值，然后执行 after 参数中的函数 ，最后把 result 返回。

over!