（给前端大全加星标，提升前端技能）
[h1]引言
[/h1]上一节介绍了高阶函数的定义，并结合实例说明了使用高阶函数和不使用高阶函数的情况。后面几部分将结合实际应用场景介绍高阶函数的应用，本节先来聊聊函数柯里化，通过介绍其定义、比较常见的三种柯里化应用、并在最后实现一个通用的 currying 函数，带你认识完整的函数柯里化。
[h1]柯里化[/h1][h2]定义[/h2]函数柯里化又叫部分求值，维基百科中对柯里化 (Currying) 的定义为：在数学和计算机科学中，柯里化是一种将使用多个参数的函数转换成一系列使用一个参数的函数，并且返回接受余下的参数而且返回结果的新函数的技术。 - // 木易杨
- 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
另一种常见的应用是 bind 函数，我们看下 bind 的使用。- // 木易杨
- let obj = {
- name: 'muyiy'
- }
- const fun = function () {
- console.log(this.name);
- }.bind(obj);
- fun(); // muyiy
我们看下模拟实现，其本身就是一种柯里化，我们在最后的实现部分会发现，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);
- }
- }
- 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);
- }
- }
- })();
当然可以使用惰性函数来实现这一功能，原理很简单，就是重写函数。- 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);
- }
[h3]3、参数复用[/h3]我们知道调用可以获取每个对象的类型，但是不同对象的有不同的实现，所以需要通过- Object.prototype.toString()
- 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
- 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]"
- Object.prototype.toString
- Object.prototype.toString.call()
[h2]实现 currying 函数[/h2]我们可以理解所谓的柯里化函数，就是封装「一系列的处理步骤」，通过闭包将参数集中起来计算，最后再把需要处理的参数传进去。那如何实现 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 包裹之后返回一个新函数，接收参数为
- 注释 3：新函数接收的参数长度是否大于等于 fn 剩余参数需要接收的长度
- 注释 4：满足要求，执行 fn 函数，传入新函数的参数
- 注释 5：不满足要求，递归 currying 函数，新的 fn 为返回的新函数（绑定了参数，未执行），新的 length 为 fn 剩余参数的长度
上面使用的是 ES5 和 ES6 的混合语法，那我不想使用这些方法呢，自然是可以的，看下面的 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(1, 2, 3) // 6
- add(1, 2)(3) // 6
- add(1)(2)(3) // 6
- add(1)(2, 3) // 6
- function add(a) {
- return function(b) {
- return a + b;
- }
- }
- 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 实现函数，其实就是判断当前参数长度够不够，参数够了就立马执行，不够就返回一个新函数，这个新函数并不执行，并且通过或者闭包保存之前传入的参数。- // 注释同上
- 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 属性获取的是形参的个数，但是形参的数量不包括剩余参数个数，而且仅包括第一个具有默认值之前的参数个数，看下面的例子。- ((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
- 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
- ((a = 1, b, c) => {}).length === 0
- [1, undefined, undefined]
[h2]小结[/h2]我们通过定义认识了什么是柯里化函数，并且介绍了三种实际的应用场景：延迟计算、动态创建函数、参数复用，然后实现了强大的通用化 currying 函数，不过更像是柯里化 (currying) 和偏函数 (partial application) 的综合应用，并且在最后介绍了函数的 length，算是意外之喜。
- 定义：柯里化是一种将使用多个参数的函数转换成一系列使用一个参数的函数，并且返回接受余下的参数而且返回结果的新函数的技术
- 实际应用
- 延迟计算：部分求和、bind 函数
- 动态创建函数：添加监听 addEvent、惰性函数
- 参数复用：
- Function.prototype.call.bind(Object.prototype.toString)
- 实现 currying 函数：用闭包把传入参数保存起来，当传入参数的数量足够执行函数时，就开始执行函数
- 函数参数 length：获取的是形参的个数，但是形参的数量不包括剩余参数个数，而且仅包括第一个具有默认值之前的参数个数
[h1]参考资料[/h1]JavaScript 专题之函数柯里化
JavaScript 专题之惰性函数
柯里化在工程中有什么好处?
（点击标题可跳转阅读）
JavaScript 高阶函数浅析
当初要是看了这篇，React高阶组件早会了
使用高阶函数实现类的扩展设计
觉得本文对你有帮助？请分享给更多人
关注「前端大全」加星标，提升前端技能
好文章，我在看
|
|
转播
