柯里化Currying

2018-07-30

摘要：冴羽的博客学习函数柯里化Currying

柯里化

柯里化 Currying 是把接受多个参数的函数转换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术

通俗的讲就是将使用多个参数的函数转换成一系列使用一个参数的函数
注意两点特征：
1.接受单一参数
2.返回函数

function add(a, b) {
  return a + b;
}
// 调用add需要传递2个参数
add(1,2)
// curry柯里化add函数
var addCurry = curry(add);
addCurry(1)(2)

第一版

注意参数的处理：柯里化要使用闭包将所有参数集中后一起处理

function curry(fn) {
  // slice将类数组转化为数组
  // [].slice是Array.prototype.slice的简化形式
  var args = [].slice.call(arguments, 1);
  return function() {
    var newArgs = args.concat([].slice.call(arguments));
    return fn.apply(this, newArgs);
  };
}
// add函数
function add(a, b) {
  return a + b;
}
// 方法一
var addCurry1 = curry(add, 1, 2);
addCurry1()
// 方法二
var addCurry2 = curry(add, 1);
addCurry2(2)
// 方法三
var addCurry3 = curry(add);
addCurry3(1, 2)

第二版

function sub_curry(fn) {
  var args = [].slice.call(arguments, 1);
  return function () {
    // 这里的arguments在执行时从后往前开始连接相邻的参数
    // 例如：[3] => [2, 3] => [1, 2, 3]
    return fn.apply(this, args.concat([].slice.call(arguments)));
  };
}
function curry(fn, length) {
  length = length || fn.length;
  var slice = Array.prototype.slice;
  return function () {
    if (arguments.length < length) {
      var combined = [fn].concat(slice.call(arguments));
      // 注意curry的第一个参数fn是变化的，每次调用sub_curry相当于在原来的fn外层添加了一个返回fn的匿名函数以构成新的fn
      return curry(sub_curry.apply(this, combined), length - arguments.length)
    } else {
      return fn.apply(this, arguments)
    }
  }
}
var fn = curry(function(a, b, c) {
    return [a, b, c];
});
fn(1)(2)(3) // [1, 2, 3]

分析一下：执行fn(1)时，1 < 3为true返回

curry(sub_curry.apply(this,[fn, 1]), 2)
// 相当于
curry(function(){
  return fn.apply(this,[1].concat([].slice.call(arguments)))
}, 2)
// 此时的fn为
function(){
  return fn.apply(this,[1].concat([].slice.call(arguments)))
}

执行fn(1)(2)时，1 < 2为true返回

curry(function(){
  return (function(){
    return fn.apply(this,[1].concat([].slice.call(arguments)))
  }).apply(this,[2].concat([].slice.call(arguments)))
}, 1)
// 此时fn为
function(){
  return (function(){
    return fn.apply(this,[1].concat([].slice.call(arguments)))
  }).apply(this,[2].concat([].slice.call(arguments)))
}

执行fn(1)(2)(3)是，1 < 1为false返回

(function(){
  return (function(){
    return fn.apply(this,[1].concat([].slice.call(arguments)))
  }).apply(this,[2].concat([].slice.call(arguments)))
}).apply(this, [3])
// 执行外层函数
function(){
  return fn.apply(this,[1].concat([].slice.call(arguments)))
}.apply(this,[2, 3])
// 类似的得到
fn.apply(this, [1, 2, 3]) // [1, 2, 3]

由此可见：每次执行 curry 都相当于在原来的 fn 外面添加一层立即执行函数，并传递参数绑定 this

简单版

function curry(fn, args) {
  var length = fn.length;
  args = args || [];
  return function () {
    var _args = args.slice(0),
      arg, i;
    for (i = 0; i < arguments.length; i++) {
      arg = arguments[i];
      _args.push(arg);
    }
    if (_args.length < length) {
      return curry.call(this, fn, _args);
    } else {
      return fn.apply(this, _args);
    }
  }
}

高颜值版

// 传函数时不能传递其他参数
var curry = fn =>
  judge = (...args) =>
    args.length === fn.length
      ? fn(...args)
      : (...arg) => judge(...args, ...arg)

// 注意 bind 的使用
var curry = (fn, ...args) =>
  fn.length <= args.length
    ? fn(...args)
    : curry.bind(null, fn, ...args)

第三版

如果不想按照顺序传递参数，创建一个占位符可以改变传参顺序

function curry(fn, args, holes) {
  var length = fn.length;
  args = args || []; // 所有已接收的参数
  holes = holes || []; // 占位符数组，值为占位符在args中对应的索引值，如args为[_, _, 3, _, 5]则holes为[0, 1, 3]

  return function () {
    var _args = args.slice(0),
      _holes = holes.slice(0),
      argsLen = args.length,
      holesLen = holes.length,
      arg, i, index = 0;

    for (i = 0; i < arguments.length; i++) {
      arg = arguments[i];
      // 参数是占位符且占位符数组不为空，类似 fn(1, _, _, 4)(_, 3) 这种情况，index 需要指向 holes 正确的下标
      if (arg === _ && holesLen) {
        index++
        if (index > holesLen) {
          _args.push(arg);
          _holes.push(argsLen - 1 + index - holesLen)
        }
      }
      // 参数是占位符且占位符数组为空，类似 fn(1)(_) 这种情况
      else if (arg === _) {
        _args.push(arg);
        _holes.push(argsLen + i);
      }
      // 参数不是占位符且占位符数组不为空，类似 fn(_, 2)(1) 这种情况
      else if (holesLen) {
        // fn(_, 2)(_, 3)
        if (index >= holesLen) {
          _args.push(arg);
        }
        // fn(_, 2)(1) 用参数 1 替换占位符
        else {
          _args.splice(_holes[index], 1, arg);
          _holes.splice(index, 1)
        }
      }
      // 参数不是占位符且占位符数组为空
      else {
        _args.push(arg);
      }
    }

    if (_holes.length || _args.length < length) {
      return curry.call(this, fn, _args, _holes);
    }
    else {
      return fn.apply(this, _args);
    }
  }
}
var _ = {}; // 以空对象为占位符
var fn = curry(function(a, b, c, d, e) {
    console.log([a, b, c, d, e]);
});

// 验证 输出全部都是 [1, 2, 3, 4, 5]
fn(1, 2, 3, 4, 5);
fn(_, 2, 3, 4, 5)(1);
fn(1, _, 3, 4, 5)(2);
fn(1, _, 3)(_, 4)(2)(5);
fn(1, _, _, 4)(_, 3)(2)(5);
fn(_, 2)(_, _, 4)(1)(3)(5)