高阶函数魅力
# 1. 什么是高阶函数?
高阶函数的概念很简单,满足下列任何一个条件即可:
1.函数参数是一个函数
2. 如果一个函数返回一个函数
# 2. 那么高阶函数有哪些应用场景呢?
# 2.1 AOP(面向切面编程)
主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,其实就是给原函数增加一层,不用管原函数内部实现
# 2.1.1 before函数
在Function的原型链上扩展一个before方法,函数执行时,before里面的逻辑也会执行。所以before的参数是一个函数,返回值也是一个函数。
Function.prototype.before = function (fn){
return (...args)=>{
fn()
this(...args)
}
}
function method(){
console.log('我是小明')
}
// case
const fn =method.before(function(){
console.log('hello!')
})
fn()
// hello
// 我是小明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
before函数在任何函数调用的时候都会先执行,无需关心函数的具体实现,就给所有的函数加了一层逻辑,在全局处理某些逻辑的时候非常有用。
# 2.1.2 after函数
例如当一个函数执行了一定次数后,不允许再执行了
const after = (times, callback) => () => {
if (--times === 0) {
callback();
}
};
const newFn = after(3, () => {
console.log("ok");
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 3. 柯理化函数
柯理化函数参数是函数,返回值也是函数,他的作用是将函数处理的更具体一些,并且保留参数。柯理应用非常广泛,例如在Vue2就用到了柯理化做逻辑判断函数。
# 3.1 判断数据类型
function isType(typing){ // 高阶函数可以用于保存参数
return function (val) {
return Object.prototype.toString.call(val) == `[object ${typing}]`
}
}
isType('Array')([]) // true
isType('Array')({}) // false
1
2
3
4
5
6
7
2
3
4
5
6
7
# 3.2 通用柯理化函数
const currying = (fn,args = []) => {
// 获取fn参数的个数
let len = fn.length;
return (..._)=>{
// 收集参数
let arg = args.concat(_);
// 如果收集的参数少于fn传入参数的个数,继续递归收集参数
if(arg.length < len){
return currying(fn,arg);
}
// 否则执行fn,把收集好的参数集合当入参传入
return fn(...arg);
}
};
const add = (a, b, c, d, e) => {
return a + b + c + d + e;
};
let r = currying(add)(1)(2,3)(4,5);
console.log(r); // 15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 3.3 用柯理化写一个js判断类型的工具函数
const types = ['String','Number','Boolean','Array','Object','Symbol'];
let utils = {}
types.forEach(type=>{
utils[`is${type}`] = currying(isType)(type);
})
1
2
3
4
5
2
3
4
5
编辑 (opens new window)
上次更新: 2022/05/22, 18:34:11