函数式编程之AOP面向切面编程

假设我们目前有一个小需求:
实现目标函数调用前后的业务逻辑方法。

// intro 实现test函数调用前后的业务逻辑方法;
function test() {
  console.log(2);
};

// 调用函数
test();
// expect 期望输出如下
// console.log(1);
// console.log(2);
// console.log(3);

思考一下我们将会如何实现?

难点:
1、方法在绑在哪?
2、函数的执行顺序。
3、this指向如何保证?
4、参数如何保证?

思路:
事实上我们知道在js代码中任何函数都是Function构造函数的实例对象,
既然要实现额外的功能就一定会重写函数本身,意味着全新的函数,
故可以将方法绑定在所有函数的原型上;

实现如下:

// intro 实现test函数调用前后的业务逻辑方法;
function test() {
  console.log(2);
};

// 绑定方法
Function.prototype.before = function(beforeFn) {
  const _this = this;   // test调用 指向 原函数
  return function() {   // return 中间函数
    beforeFn();    // 前置函数
    _this();       // 原函数 test
  };    
};
Function.prototype.after = function(afterFn) {
  const _this = this;   // 中间函数
  return function() {   // 最终重写后的 test函数
    _this();    // 中间函数
    afterFn();  // 后置函数
  };    
};

// 重写
test = test.before(function() {
      console.log(1);
    })
    .after(function() {
      console.log(3);
    })

// 调用函数
test();
// 输出如下
// console.log(1);
// console.log(2);
// console.log(3);

如此就能实现函数调用前后的业务逻辑方法啦。
更多的问题? this的指向如何保证呢?

你可能感兴趣的:(javascript前端)