抽离before拦截器(高阶函数的使用+箭头函数使用)

176

1. coreFn核心模块执行之前的方法

(1)需求,在核心逻辑实现之前先执行before方法,将一般代码与核心逻辑隔离

比如:判断用户是否登录等逻辑,创建before拦截器等功能

(2)实现代码

function coreFn(params) {
  console.log('coreFn:核心逻辑', params);
}
function beforeFn() {
  console.log('beforeFn:核心逻辑执行之前执行');
}
coreFn.before = function (beforeFn) {
  return (...args) => {
    // beforeFn
    console.log('这里写beforeFn');
    beforeFn();
    // 核心逻辑
    this(...args);
  };
};

let newFn = coreFn.before(beforeFn);
newFn();

2.优化代码:把before做成一个公共模块

(1)存在的问题:

现在before方法是挂在到coreFn上的, 如果这是新加一个coreFn2,也想实现before方法,那代码只能copy,无法复用,

解决办法,把before方法放在Function原型链上

(2)实现代码

function coreFn(params) {
  console.log('coreFn:核心逻辑', params);
}
function beforeFn() {
  console.log('beforeFn:核心逻辑执行之前执行');
}
Function.prototype.before = function (beforeFn) {
  return (...args) => {
    // beforeFn
    console.log('这里写beforeFn');
    beforeFn();
    // 核心逻辑
    this(...args);
  };
};

let newFn = coreFn.before(beforeFn);
newFn('这是请求参数');

3. 关于代码中的this指向问题:

before方法的this指向 ,截取前文代码

Function.prototype.before = function (beforeFn) {
  return (...args) => {
    // beforeFn ...
    // 核心逻辑
    this(...args);
  };
};
let newFn = coreFn.before(beforeFn);

- 一般来说,函数的this指向执行这个方法的对象,

- 对于箭头函数,没有原型链,没有arguments,没有this,那么箭头函数的this,取决于上下文中的this

- 箭头函数this举例:

例如 这个 this(...args)中的this,是执行普通函数 function(beforeFn){} 的this, 是coreFn

因为 coreFn.before(beforeFn)

4. 高阶函数的概念 扩展

满足下列条件之一的就是高阶函数

(1)函数的参数是函数

例如:回调函数 function fn(()=>{})

(2)函数的返回值是函数,例如闭包

上文中的before方法也是一个高阶函数