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方法也是一个高阶函数