一道題看透函數(shù)柯里化

marser 發(fā)布于2019-08-26 11:49 / 3408人閱讀

摘要：對于函數(shù)的柯里化應(yīng)該不陌生，簡單來說技術(shù)是一種通過把多個(gè)參數(shù)填充到函數(shù)體中，實(shí)現(xiàn)將函數(shù)轉(zhuǎn)換為一個(gè)新的經(jīng)過簡化的使之接受的參數(shù)更少函數(shù)的技術(shù)。

對于函數(shù)的柯里化(currying)應(yīng)該不陌生，簡單來說 Currying 技術(shù)是一種通過把多個(gè)參數(shù)填充到函數(shù)體中，實(shí)現(xiàn)將函數(shù)轉(zhuǎn)換為一個(gè)新的經(jīng)過簡化的（使之接受的參數(shù)更少）函數(shù)的技術(shù)。當(dāng)發(fā)現(xiàn)正在調(diào)用同一個(gè)函數(shù)時(shí)，并且傳遞的參數(shù)絕大多數(shù)都是相同的，那么用一個(gè)Curry化的函數(shù)是一個(gè)很好的選擇.

下面利用閉包實(shí)現(xiàn)一個(gè)curry化的加法函數(shù), 我們簡單理解一下 curry 化：

function add(x, y){
    if(x && y) return x + y;
    if(!x && !y) throw Error("Cannot calculate");
    return function(newx){
        return x + newx;
    };
}
add(3)(4); //7
add(3, 4); //7
var newAdd = add(5);
newAdd(8); //13
var add2000 = add(2000);
add2000(100); //2100

這樣做其實(shí)很類似 bind:

function add(a, b){
  console.log(a+b);
  return a + b;
}

add(3, 4);   //7
add.bind(null, 3)(4);   //7
var newAdd = add.bind(null, 5);
newAdd(8);   //13
var add2000 = add.bind(null, 2000);
add2000(100); //2100

同理也可以使用 call 和 apply, 因?yàn)樗麄兛梢詫?shí)現(xiàn) bind 的功能：

Function.prototype.bind = function(context){
  var _this = this;
  var args = [].slice.call(arguments, 1);

  return function (){
    innerArgs = [].slice.call(arguments);
    if(innerArgs && innerArgs.length > 0)
      args.push.apply(args, innerArgs);
    return _this.apply(context, args);
  }
}
add(3, 4);   //7
add.bind(null, 3)(4);   //7
var newAdd = add.bind(null, 5);
newAdd(8);   //13
var add2000 = add.bind(null, 2000);
add2000(100); //2100

但是，如果看到了這個(gè)題：

實(shí)現(xiàn)一個(gè)函數(shù)sum，運(yùn)算結(jié)果可以滿足如下預(yù)期結(jié)果：

sum(1,2,3);       //6
sum(2,3)(2);      //7
sum(1)(2)(3)(4);  //10
sum(2)(4,1)(2);   //9

還覺得簡單么？我們理一下思路。首先試想一下這個(gè) sum 函數(shù)的結(jié)構(gòu):

function sum(){
  return function(){
    return function(){
      //...
    }
  }
}

這個(gè)函數(shù)返回的一定是個(gè)函數(shù)，但貌似需要寫無限個(gè)，這個(gè)不合理，我們修改一下：

function sum(){
  function innerSum(){
    //...
    return innerSum();
  }
  return innerSum();
}

這樣一來每次調(diào)用就不需要定義無限個(gè)函數(shù)了。我們完善里面的代碼：

//sum(1,2,3);       //6
//sum(2,3)(2);      //7
//sum(1)(2)(3)(4);  //10
//sum(2)(4,1)(2);   //9
function sum(){
  var cur = [].slice.call(arguments).reduce(function(a,b){return a+b;},0);
  function innerSum(){
    var next = [].slice.call(arguments).reduce(function(a,b){return a+b;},0);
    cur += next;
    return innerSum;
  }
  return innerSum;
}

這樣 sum 函數(shù)的柯里化過程就完成了，但是這個(gè)函數(shù)的返回的總是一個(gè)函數(shù)，這樣我們?nèi)绾屋敵鰯?shù)值呢？我們可以借助隱式類型轉(zhuǎn)換需要的 toString 函數(shù)實(shí)現(xiàn)：

function sum(){
  var cur = [].slice.call(arguments).reduce(function(a,b){return a+b;},0);
  function innerSum(){
    var next = [].slice.call(arguments).reduce(function(a,b){return a+b;},0);
    cur += next;
    return innerSum;
  }
  innerSum.toString = function(){
    return cur;
  }
  return innerSum;
}
console.log(sum(1,2,3));       //6
console.log(sum(2,3)(2));      //7
console.log(sum(1)(2)(3)(4));  //10
console.log(sum(2)(4,1)(2));   //9

計(jì)算結(jié)果沒錯(cuò)，我們還可以換作 valueOf 實(shí)現(xiàn)：

function sum(){
  var cur = [].slice.call(arguments).reduce(function(a,b){return a+b;},0);
  function innerSum(){
    var next = [].slice.call(arguments).reduce(function(a,b){return a+b;},0);
    cur += next;
    return innerSum;
  }
  innerSum.valueOf = function(){
    return cur;
  }
  return innerSum;
}
console.log(sum(1,2,3));       //6
console.log(sum(2,3)(2));      //7
console.log(sum(1)(2)(3)(4));  //10
console.log(sum(2)(4,1)(2));   //9

其實(shí)，如果同時(shí)存在 toString 和 valueOf 系統(tǒng)會(huì)先調(diào)用 toString, 然后調(diào)用valueOf，返回值自然是 valueOf 的返回值。這個(gè)很基礎(chǔ)，這里就不提了。

通用柯里化方法

通用的柯里化寫法其實(shí)比之前的 sum 函數(shù)要簡單許多

var currying = function(fn) {
  // 主要還是收集所有需要的參數(shù)到一個(gè)數(shù)組中，便于統(tǒng)一計(jì)算
  var args = [].slice.call(arguments, 1);
  return function(){
      var _args = args.concat([].slice.call(arguments));
      return fn.apply(null, _args);
  }
}

var sum = function(){
  var args = [].slice.call(arguments);
  return args.reduce(function(a, b) {
      return a + b;
  });
};

var sum10 = currying(sum, 10);
console.log(sum10(20, 10));  // 40
console.log(sum10(10, 5));   // 25