柯里化定义
柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数的新函数
fn(1)(2)(3)(4)
fn(1, 2)(3)(4)
fn(1, 2, 3)(4)
fn(1, 2, 3, 4)
柯里化的思想就是把参数缓存起来,等到特定的时机来计算返回结果,比如实现一个 add
方法
add(1)(2)(3) = 6
add(1, 2)(3) = 6
add(1, 2, 3) = 6
function add(...args) {
function _add(...args2) {
return add.apply(null, [...args, ...args2])
}
// 隐式转换,先调用valueOf再调用toString
_add.valueOf = _add.toString = function() {
return args.reduce((a, b) => (a + b))
}
return _add
}
console.log(add(1)(2)(3)) // 6
console.log(add(1, 2)(3)) // 6
console.log(add(1, 2, 3)) // 6
柯里化应用
延迟执行
举个例子,绑定dom事件的时候,我们经常做了一个兼容的写法,例如
function addEvent(el, type, fn, isCapture = false) {
if (window.addEventListener) {
el.addEventListener(type, fn, isCapture)
} else {
el.attachEvent(`on${type}`, fn)
}
}
这样有一个缺点就是每次调用 addEvent 方法都需要判断再绑定,这时候可以利用柯里化来实现
const addEvent = (() => {
if (window.addEventListener) {
return (el, type, fn, isCapture = false) => {
el.addEventListener(type, fn, isCapture)
}
} else {
return (el, type, fn) => {
el.attachEvent(`on${type}`, fn)
}
}
})()
- 提前返回 – 使用函数立即调用进行了一次兼容判断(部分求值),返回兼容的事件绑定方法
- 延迟执行 – 返回新函数,在新函数调用兼容的事件方法。等待addEvent新函数调用,延迟执行
本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com