# 柯里化

# 什么是柯里化?

官方定义是: 柯里化(curring)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。

我对它的理解是: 若一个函数需要接收多个参数,本身调用它时,需要单次传多个参数。柯里化之后,可以分为多次调用,参数为一个或多个不等,注意多次调用里的参数总和要与回调函数需要的参数个数相等。其原理是每次传参,都会做参数总和比较,判断完后,决定是否返回原函数继续传参,否则调用传入的回调函数。

# 使用场景

  1. 参数复用

    // 正则校验字符串
    function check(reg,str){
    	return reg.test(str);
    }
    check(/\d+/g,'test')   //false
    check(/[a-z]+/g,'test') //true
    
    // Curring后
    function curryingCheck(reg){
    	return function(str){
    		return reg.test(str);
    	}
    }
    
    let checkoutNumber = curringCheck(/\d+/g);
    let checkoutLetter = curringCheck(/[a-z]+/g);
    
    checkoutNumber(123); // true;
    checkoutLetter("abc"); // true
    
    
  2. bind函数

    Function.prototype.bind = function (context) {
        let _this = this;
        let args = Array.prototype.slice.call(arguments,1);
        
        return function(){
        	return _this.apply(context,args);
        }
    }
    

# 经典例子

计算多个数字相加

/**
 * 写一个add函数,要求用上柯里化
*/

function add(a){
    return function(n){
      return a+n;
    }
}

const result = add(1)(2);
console.log(result); // 3

上述的计算总和函数中,add函数返回了一个带参匿名函数。创建add实例时,实际上就是创建了这个函数。再去调用这个函数,传入第二个数字,结果就能计算出来。这是最简易的柯里化例子。

# 进阶

上述例子都是在原函数的基础上改动===>返回带参函数===>调用原函数两次,完成函数柯里化。那么接下来进阶成,写个通用方法,不改变原函数的同时又能对函数进行柯里化。

// 初次封装
let curring = function(fn) {
	// 获取第一次调用的所有参数
	let args = Array.prototype.slice.call(arguments,1)
	return funciton() 
	// 将后面调用的参数与第一次合并
	 let innerArgs = args.concat(Array.prototype.slice.call(arguments));
	 // 合并参数后通过apply改变fn的this指向,并将参数传入fn中

	}
}

上述的封装有个缺陷,只支持扩展一个参数,要想扩展多个参数,就要使用到递归。

// 总和函数
function add(a, b, c, d) {
  return a + b + c + d;
}

// 柯里化函数
function curring(fn, args) {
  /**
   * 内部逻辑: 拿到fn的长度,每次调用时,都将记录传参的长度,并于fn长度作比较
   * 未达到fn长度,则递归,否则调用fn
   */
  let len = fn.length;
  let _this = this;
  let recordArray = args || [];

  return function () {
    let _args = [...arguments];
    Array.prototype.push.apply(recordArray, _args); // 虽然这里直接recordArray好一些,但以防开发者在第二参数中传错类型。

    if (recordArray.length < len) {
      return curring.call(_this, fn, recordArray);
    } else {
      return fn.call(_this, ...recordArray);
    }
  };
}

let c = curring(add);
console.log(c(1, 2, 3, 4)); // 10

# 逻辑上分为几个步骤

  1. 通过递归,存储传入的参数。并在判断中与fn参数长度做比对
  2. 若记录数组的长度未达到fn参数长度,则递归
  3. 否则执行该函数

# 注意事项

上述的curring实例中,只能用一次,若继续用则需要传入4个参数。这是因为在最后一次返回结果时,c()已经返回成了 add(a,b,c,d)这个函数,因此如果不按照(a,b,c,d)传,便会报错

// 修改前的运行
console.log(c(1, 2, 3, 4)); // 10
console.log(c(1, 2)(3, 4)); // TypeError: c(...) is not a function
console.log(c(1)(2)(3)(4)); // TypeError: c(...) is not a function

// 修改后的运行
console.log(c(1)(2)(3)(4)); // 10
console.log(c(1, 2, 3, 4)); // 10
console.log(c(1, 2, 3, 4)); // 10
console.log(c(1, 2, 3, 4)); // 10

# 经典面试题

// 实现一个add方法,使计算结果能够满足如下预期:
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;

function add() {
    // 第一次执行时,定义一个数组专门用来存储所有的参数
    var _args = Array.prototype.slice.call(arguments);

    // 在内部声明一个函数,利用闭包的特性保存_args并收集所有的参数值
    var _adder = function() {
        _args.push(...arguments);
        return _adder;
    };

    // 利用toString隐式转换的特性,当最后执行时隐式转换,并计算最终的值返回
    _adder.toString = function () {
        return _args.reduce(function (a, b) {
            return a + b;
        });
    }
    return _adder;
}

add(1)(2)(3)                // 6
add(1, 2, 3)(4)             // 10
add(1)(2)(3)(4)(5)          // 15
add(2, 6)(1)                // 9


# 隐式转换解释

// 当我们打印执行结果时,并不是6
console.log(add(1,2)(3));    // { [Function: _adder] toString: [Function] }

// 只有这样打印才会输出6
console.log(add(1,2)(3).toString());  // 6

// 作为判断条件时,toString会隐式执行
console.log(add(1,2)(3) == 6); // true  toString悄悄执行了,将收集到的参数进行累加

// ****需要注意的点****
console.log(add(1,2)(3) === 6); // false,他们的类型不一样

// 或者作为运算符的某一项时,toString也会隐式执行
console.log(add(1,2)(3)+1); // 7
console.log(add(1,2)(3)-1); // 5
console.log(add(1,2)(3)*1); // 6
console.log(add(1,2)(3)/2); // 3

# 总结

  1. 柯里化函数通过递归的方式,存储一次次的参数,当参数长度达到预期值时,便返回fn本身并执行
  2. 如若没有用参数长度作为判断标准,即调用次数未知但仍然可以对目标函数实现柯里化。则需要使用到Function.prototype.toString的机制。当回调函数执行到最后一次时,便会调用原型上的方法toString,改写它就能得到预期值。
  3. 柯里化函数存储参数,可用闭包存储,也可在递归中将arguments以数组方式传回。

# 参考资料

  1. 详解JS函数柯里化 (opens new window)
  2. 柯里化中,利用toString隐式转换解决多参调用 (opens new window)