柯里化的定义:
柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术
柯里化的特点:
- 参数复用:如果是相同的参数,在计算之后不需要再次重新传参计算
- 提前返回:多次调用多次内部判断,可以直接把第一次判断的结果返回外部接收
- 延迟执行:避免重复的去执行程序,等真正需要结果的时候再执行
第一个特点 参数复用,本质上是降低通用性,提高适用性。
例子: add(1)(2)(3) ==> 6
利用闭包的原则,add 函数执行的时候,返回 add 函数中的内部函数,再次执行的时候其实执行的是这个内部函数,这个内部函数中接着又嵌套了一个内部函数,用于计算最终结果并返回。
function add (a) {
return function (b) {
return function (c) {
console.log(a + b + c)
}
}
}
// 前面两项固定不变,add(1) add(2)不会再执行 提高性能
const add1 = add(1)
const add2 = add1(2)
add(1)(2)(3)
add2(3)
第二个特点 提前返回
例子 :封装兼容现代浏览器和 IE 浏览器的事件监听的方法,正常情况下封装是这样的。
var addEvent = function (el, type, fn, capture) {
// 对浏览器进行判断 不同的浏览器不同绑定方法
if (window.addEventListener) {
el.addEventListener(type, function (e) {
fn.call(el, e)
}, capture)
} else {
el.attachEvent('on' + type, function (e) {
fn.call(el, e)
})
}
}
addEvent(p, click, callback, true)
addEvent(div, click, callback, true)
addEvent(span, click, callback, true)
该封装的方法存在的不足是,每次写监听事件的时候调用 addEvent 函数,都会进行 if else 的兼容性判断。事实上在代码中只需要执行一次兼容性判断就可以了,后续的事件监听就不需要再去判断兼容性了。那么怎么用函数柯里化优化这个封装函数?
var addEvent = function() {
if(window.addEventListener) {
return function(el, type, fn, capture) {
el.addEventListener(type, function(e) {
fn.call(el, e);
}, capture);
}
}else {
return function(ele, type, fn) {
el.attachEvent('on' + type, function(e) {
fn.call(el, e);
})
}
}
}
var elBind = addEvent() // 判断浏览器,得到一个函数
elBind (p, click, callback, true)
elBind(div, click, callback, true)
elBind (span, click, callback, true)
js 引擎在执行该段代码的时候就会进行兼容性判断,并且返回需要使用的事件监听封装函数。
第三个特点 延迟执行
// 空间换时间
var curryScore = function (fn) {
var _allScore = []
return function () {
if (arguments.length === 0) {
return fn.apply(null, _allScore) // apply 形实转换 对象冒充 执行函数
} else {
_allScore = _allScore.concat([].slice.call(arguments))
}
}
}
var allScore = 0
var curryAddScore = curryScore(function () {
// 写统计的代码
for (var i = 0; i < arguments.length; i++) {
allScore += arguments[i]
}
})
curryAddScore(3)
curryAddScore(3)
console.log(allScore) // 0
curryAddScore()
console.log(allScore) // 6
柯里化通用版:
var curry = function (fn) {
var _args = []
return function cb() {
if (arguments.length === 0) {
return fn.apply(null, _args) // apply 形实转换 对象冒充 执行函数
} else {
Array.prototype.push.apply(_args, [].slice.call(arguments))
return cb
}
}
}
function add (a, b) {
console.log(a + b)
}
var addCurry = curry(add)
addCurry(1)(2)()
执行 curry 函数返回的函数接收新的参数与 args 变量存储的参数合并,并把合并的参数传入给柯里化了的函数。
参考:
https://juejin.im/post/5b8350246fb9a019c372d26d#heading-3
https://juejin.im/post/598d0b7ff265da3e1727c491