【进阶 6-2 期】深刻高阶函数应用之柯里化
更新：谢谢你们的支持，最近折腾了一个博客官网出来，方便你们系统阅读，后续会有更多内容和更多优化，猛戳这里查看前端
------ 如下是正文 ------git
引言
上一节介绍了高阶函数的定义，并结合实例说明了使用高阶函数和不使用高阶函数的状况。后面几部分将结合实际应用场景介绍高阶函数的应用，本节先来聊聊函数柯里化，经过介绍其定义、比较常见的三种柯里化应用、并在最后实现一个通用的 currying 函数，带你认识完整的函数柯里化。github
有什么想法或者意见均可以在评论区留言，下图是本文的思惟导图，高清思惟导图和更多文章请看个人 Github。面试
柯里化
定义
函数柯里化又叫部分求值，维基百科中对柯里化 (Currying) 的定义为：segmentfault
在数学和计算机科学中，柯里化是一种将使用多个参数的函数转换成一系列使用一个参数的函数，而且返回接受余下的参数并且返回结果的新函数的技术。数组
用大白话来讲就是只传递给函数一部分参数来调用它，让它返回一个新函数去处理剩下的参数。使用一个简单的例子来介绍下，最经常使用的就是 add 函数了。浏览器
// 木易杨
const add = (...args) => args.reduce((a, b) => a + b);
// 传入多个参数，执行 add 函数
add(1, 2) // 3
// 假设咱们实现了一个 currying 函数，支持一次传入一个参数
let sum = currying(add);
// 封装第一个参数，方便重用
let addCurryOne = sum(1);
addCurryOne(2) // 3
addCurryOne(3) // 4
复制代码
实际应用
一、延迟计算
咱们看下面的部分求和例子，很好的说明了延迟计算这个状况。闭包
// 木易杨
const add = (...args) => args.reduce((a, b) => a + b);
// 简化写法
function currying(func) {
const args = [];
return function result(...rest) {
if (rest.length === 0) {
return func(...args);
} else {
args.push(...rest);
return result;
}
}
}
const sum = currying(add);
sum(1,2)(3); // 未真正求值
sum(4); // 未真正求值
sum(); // 输出 10
复制代码
上面的代码理解起来很容易，就是「用闭包把传入参数保存起来，当传入参数的数量足够执行函数时，就开始执行函数」。上面的 currying 函数是一种简化写法，判断传入的参数长度是否为 0，若为 0 执行函数，不然收集参数。app
另外一种常见的应用是 bind 函数，咱们看下 bind 的使用。函数
// 木易杨
let obj = {
name: 'muyiy'
}
const fun = function () {
console.log(this.name);
}.bind(obj);
fun(); // muyiy
复制代码
这里 bind 用来改变函数执行时候的上下文，可是函数自己并不执行，因此本质上是延迟计算，这一点和 call / apply 直接执行有所不一样。
咱们看下 bind 模拟实现，其自己就是一种柯里化，咱们在最后的实现部分会发现，bind 的模拟实现和柯理化函数的实现，其核心代码都是一致的。
如下实现方案是简化版实现，完整版实现过程和代码解读请看我以前写的一篇文章，【进阶3-4期】深度解析bind原理、使用场景及模拟实现。
// 木易杨
// 简化实现，完整版实现中的第 2 步
Function.prototype.bind = function (context) {
var self = this;
// 第 1 个参数是指定的 this，截取保存第 1 个以后的参数
// arr.slice(begin); 即 [begin, end]
var args = Array.prototype.slice.call(arguments, 1);
return function () {
// 此时的 arguments 是指 bind 返回的函数调用时接收的参数
// 即 return function 的参数，和上面那个不一样
// 类数组转成数组
var bindArgs = Array.prototype.slice.call(arguments);
// 执行函数
return self.apply( context, args.concat(bindArgs) );
}
}
复制代码
二、动态建立函数
有一种典型的应用情景是这样的，每次调用函数都须要进行一次判断，但其实第一次判断计算以后，后续调用并不须要再次判断，这种状况下就很是适合使用柯里化方案来处理。即第一次判断以后，动态建立一个新函数用于处理后续传入的参数，并返回这个新函数。固然也可使用惰性函数来处理，本例最后一个方案会有所介绍。
咱们看下面的这个例子，在 DOM 中添加事件时须要兼容现代浏览器和 IE 浏览器（IE < 9），方法就是对浏览器环境进行判断，看浏览器是否支持，简化写法以下。
// 简化写法
function addEvent (type, el, fn, capture = false) {
if (window.addEventListener) {
el.addEventListener(type, fn, capture);
}
else if(window.attachEvent){
el.attachEvent('on' + type, fn);
}
}
复制代码
可是这种写法有一个问题，就是每次添加事件都会调用作一次判断，那么有没有什么办法只判断一次呢，能够利用闭包和当即调用函数表达式（IIFE）来处理。
const addEvent = (function(){
if (window.addEventListener) {
return function (type, el, fn, capture) {
el.addEventListener(type, fn, capture);
}
}
else if(window.attachEvent){
return function (type, el, fn) {
el.attachEvent('on' + type, fn);
}
}
})();
复制代码
上面这种实现方案就是一种典型的柯里化应用，在第一次的 if...else if... 判断以后完成部分计算，动态建立新的函数用于处理后续传入的参数，这样作的好处就是以后调用就不须要再次计算了。
固然可使用惰性函数来实现这一功能，原理很简单，就是重写函数。
function addEvent (type, el, fn, capture = false) {
// 重写函数
if (window.addEventListener) {
addEvent = function (type, el, fn, capture) {
el.addEventListener(type, fn, capture);
}
}
else if(window.attachEvent){
addEvent = function (type, el, fn) {
el.attachEvent('on' + type, fn);
}
}
// 执行函数，有循环爆栈风险
addEvent(type, el, fn, capture);
}
复制代码
第一次调用 addEvent 函数后，会进行一次环境判断，在这以后 addEvent 函数被重写，因此下次调用时就不会再次判断环境，能够说很完美了。
三、参数复用
咱们知道调用 toString() 能够获取每一个对象的类型，可是不一样对象的 toString() 有不一样的实现，因此须要经过 Object.prototype.toString() 来获取 Object 上的实现，同时以 call() / apply() 的形式来调用，并传递要检查的对象做为第一个参数，例以下面这个例子。
function isArray(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
function isNumber(obj) {
return Object.prototype.toString.call(obj) === '[object Number]';
}
function isString(obj) {
return Object.prototype.toString.call(obj) === '[object String]';
}
// Test
isArray([1, 2, 3]); // true
isNumber(123); // true
isString('123'); // true
复制代码
可是上面方案有一个问题，那就是每种类型都须要定义一个方法，这里咱们可使用 bind 来扩展，优势是能够直接使用改造后的 toStr。
const toStr = Function.prototype.call.bind(Object.prototype.toString);
// 改造前
[1, 2, 3].toString(); // "1,2,3"
'123'.toString(); // "123"
123.toString(); // SyntaxError: Invalid or unexpected token
Object(123).toString(); // "123"
// 改造后
toStr([1, 2, 3]); // "[object Array]"
toStr('123'); // "[object String]"
toStr(123); // "[object Number]"
toStr(Object(123)); // "[object Number]"
复制代码
上面例子首先使用 Function.prototype.call 函数指定一个 this 值，而后 .bind 返回一个新的函数，始终将 Object.prototype.toString 设置为传入参数，其实等价于 Object.prototype.toString.call() 。
实现 currying 函数
咱们能够理解所谓的柯里化函数，就是封装「一系列的处理步骤」，经过闭包将参数集中起来计算，最后再把须要处理的参数传进去。那如何实现 currying 函数呢？
实现原理就是「用闭包把传入参数保存起来，当传入参数的数量足够执行函数时，就开始执行函数」。上面延迟计算部分已经实现了一个简化版的 currying 函数。
下面咱们来实现一个更加健壮的的 currying 函数。
// 木易杨
function currying(fn, length) {
length = length || fn.length; // 注释 1
return function (...args) { // 注释 2
return args.length >= length // 注释 3
? fn.apply(this, args) // 注释 4
: currying(fn.bind(this, ...args), length - args.length) // 注释 5
}
}
// Test
const fn = currying(function(a, b, c) {
console.log([a, b, c]);
});
fn("a", "b", "c") // ["a", "b", "c"]
fn("a", "b")("c") // ["a", "b", "c"]
fn("a")("b")("c") // ["a", "b", "c"]
fn("a")("b", "c") // ["a", "b", "c"]
复制代码
-
注释 1：第一次调用获取函数 fn 参数的长度，后续调用获取 fn 剩余参数的长度
-
注释 2：currying 包裹以后返回一个新函数，接收参数为
...args -
注释 3：新函数接收的参数长度是否大于等于 fn 剩余参数须要接收的长度
-
注释 4：知足要求，执行 fn 函数，传入新函数的参数
-
注释 5：不知足要求，递归 currying 函数，新的 fn 为
bind返回的新函数（bind绑定了...args参数，未执行），新的 length 为 fn 剩余参数的长度
上面使用的是 ES5 和 ES6 的混合语法，那我不想使用 call/apply/bind 这些方法呢，天然是能够的，看下面的 ES6 极简写法，更加简洁也更加易懂。
// 参考自 segmentfault 的@大笑平
const currying = fn =>
judge = (...args) =>
args.length >= fn.length
? fn(...args)
: (...arg) => judge(...args, ...arg)
// Test
const fn = currying(function(a, b, c) {
console.log([a, b, c]);
});
fn("a", "b", "c") // ["a", "b", "c"]
fn("a", "b")("c") // ["a", "b", "c"]
fn("a")("b")("c") // ["a", "b", "c"]
fn("a")("b", "c") // ["a", "b", "c"]
复制代码
若是你还没法理解，看完下面例子你就更加容易理解了，要求实现一个 add 方法，须要知足以下预期。
add(1, 2, 3) // 6
add(1, 2)(3) // 6
add(1)(2)(3) // 6
add(1)(2, 3) // 6
复制代码
咱们能够看到，计算结果就是全部参数的和，若是咱们分两次调用时 add(1)(2)，能够写出以下代码。
function add(a) {
return function(b) {
return a + b;
}
}
add(1)(2) // 3
复制代码
add 方法第一次调用后返回一个新函数，经过闭包保存以前的参数，第二次调用时知足参数长度要求而后执行函数。
若是分三次调用时 add(1)(2)(3)，能够写出以下代码。
function add(a) {
return function(b) {
return function (c) {
return a + b + c;
}
}
}
console.log(add(1)(2)(3)); // 6
复制代码
前面两次调用每次返回一个新函数，第三次调用后知足参数长度要求而后执行函数。
这时候咱们再来看 currying 实现函数，其实就是判断当前参数长度够不够，参数够了就立马执行，不够就返回一个新函数，这个新函数并不执行，而且经过 bind 或者闭包保存以前传入的参数。
// 注释同上
function currying(fn, length) {
length = length || fn.length;
return function (...args) {
return args.length >= length
? fn.apply(this, args)
: currying(fn.bind(this, ...args), length - args.length)
}
}
复制代码
扩展：函数参数 length
函数 currying 的实现中，使用了 fn.length 来表示函数参数的个数，那 fn.length 表示函数的全部参数个数吗？并非。
函数的 length 属性获取的是形参的个数，可是形参的数量不包括剩余参数个数，并且仅包括第一个具备默认值以前的参数个数，看下面的例子。
((a, b, c) => {}).length;
// 3
((a, b, c = 3) => {}).length;
// 2
((a, b = 2, c) => {}).length;
// 1
((a = 1, b, c) => {}).length;
// 0
((...args) => {}).length;
// 0
const fn = (...args) => {
console.log(args.length);
}
fn(1, 2, 3)
// 3
复制代码
因此在柯里化的场景中，不建议使用 ES6 的函数参数默认值。
const fn = currying((a = 1, b, c) => {
console.log([a, b, c]);
});
fn();
// [1, undefined, undefined]
fn()(2)(3);
// Uncaught TypeError: fn(...) is not a function
复制代码
咱们指望函数 fn 输出 [1, 2, 3]，可是实际上调用柯里化函数时 ((a = 1, b, c) => {}).length === 0，因此调用 fn() 时就已经执行并输出了 [1, undefined, undefined]，而不是理想中的返回闭包函数，因此后续调用 fn()(2)(3) 将会报错。
小结
咱们经过定义认识了什么是柯里化函数，而且介绍了三种实际的应用场景：延迟计算、动态建立函数、参数复用，而后实现了强大的通用化 currying 函数，不过更像是柯里化 (currying) 和偏函数 (partial application) 的综合应用，而且在最后介绍了函数的 length，算是意外之喜。
- 定义：柯里化是一种将使用多个参数的函数转换成一系列使用一个参数的函数，而且返回接受余下的参数并且返回结果的新函数的技术
- 实际应用
- 延迟计算：部分求和、bind 函数
- 动态建立函数：添加监听 addEvent、惰性函数
- 参数复用：
Function.prototype.call.bind(Object.prototype.toString)
- 实现 currying 函数：用闭包把传入参数保存起来，当传入参数的数量足够执行函数时，就开始执行函数
- 函数参数 length：获取的是形参的个数，可是形参的数量不包括剩余参数个数，并且仅包括第一个具备默认值以前的参数个数
参考资料
文章穿梭机
- 【进阶 6-1 期】JavaScript 高阶函数浅析
- 【进阶 5-3 期】深刻探究 Function & Object 鸡蛋问题
- 【进阶 5-2 期】图解原型链及其继承优缺点
- 【进阶 5-1 期】从新认识构造函数、原型和原型链
交流
进阶系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。
我是木易杨，公众号「高级前端进阶」做者，跟着我每周重点攻克一个前端面试重难点。接下来让我带你走进高级前端的世界，在进阶的路上，共勉！
- 1. 高阶函数应用 —— 柯里化与反柯里化
- 2. js 高阶函数之柯里化
- 3. JavaScript进阶之函数柯里化
- 4. 015.高阶函数-函数柯里化
- 5. js高阶函数应用—函数柯里化和反柯里化(二)
- 6. js高阶函数应用—函数柯里化和反柯里化
- 7. Python进阶1---高阶函数、柯里化
- 8. Scala高阶函数、闭包、柯里化
- 9. 深刻理解javascript函数进阶系列第二篇——函数柯里化
- 10. 高阶函数之函数柯里化function currying
- 更多相关文章...
- • Scala 高阶函数 - Scala教程
- • Scala 函数柯里化(Currying) - Scala教程
- • TiDB 在摩拜单车在线数据业务的应用和实践
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 字节跳动21届秋招运营两轮面试经验分享
- 2. Java 3 年，25K 多吗？
- 3. mysql安装部署
- 4. web前端开发中父链和子链方式实现通信
- 5. 3.1.6 spark体系之分布式计算-scala编程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在线
- 8. 在线画图
- 9. devtools热部署
- 10. 编译和链接