函数柯里化

柯里化的定义:

柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术

柯里化的特点:

  • 参数复用:如果是相同的参数,在计算之后不需要再次重新传参计算
  • 提前返回:多次调用多次内部判断,可以直接把第一次判断的结果返回外部接收
  • 延迟执行:避免重复的去执行程序,等真正需要结果的时候再执行
第一个特点 参数复用,本质上是降低通用性,提高适用性。

例子: 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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

callmeCassie

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值