柯里化的两种写法(弄懂`fn.length`与`fn.toString()`)

写在前面

柯里化，一个很有意思的名词，从字面意思猜不透到底是什么！？

今天就和大家一起分享一下函数的柯里化的两种写法，彻底弄懂fn.length与fn.toString()

---

在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的，尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的。【来自百度百科】

• 举个例子

let add1 = (a, b, c) => {
  return a + b + c
}

let add2 = (a) => {
  return b => {
    return c => {
      return a + b + c
    }
  }
}
console.log(add1(1, 2, 3));
console.log(add2(1)(2)(3));

• 我们把add1写成add2就叫做函数的柯里化
• 总的来说就是柯里化会拿到部分参数生成一个新的函数，然后用新的函数接收剩余的参数
• 这样，我们就可以在固定一些参数的情况下，生成一些细粒度更小的函数，这样更方便我们进行编程(比如函数式编程)

柯里化的两种写法

有同学看到了上面的代码，会说，柯里化还不简单，把它拆开写就好了。
但是，如果参数越来越多，上面的这种梯田式写法就很难满足我们的需求了，而且很繁琐不够优雅

• 所以，对于这种繁琐的重复的步骤，我们就会想到使用递归来实现
• 那么，问题来了，我们先要找到函数的递归出口
  • 引入一个知识点fn.length表示一个函数所需要的参数个数，所以我们判断参数小于fn.length就递归，否则就执行函数
• 那么，如何来保存前面的参数呢？
  • 我们的递归函数可以使用ES6中的rest参数来保存前面的参数
• 那么，如何获得当前函数的参数呢？
  • 我们的递归函数内部会返回一个函数，内部函数的rest参数就是当前函数的参数
• 所以，我们的函数总参数就是let _args=[...args,...params]（这里用到了ES6的扩展运算符）

---

• 下一个问题，如果我们柯里化的函数的参数不确定呢？
  • fn.length不确定，前面的方法就行不通了
  • 这确实是一个问题，简单来说就是通过改写fn.toString()通过隐式转换来得到结果

---

下面就分为fn.length已知和未知给大家带来柯里化的两种写法

fn.length已知

• 已知的写法在上面阐述的比较多了
• 1.我们用到了高阶函数,这样可以拿到以前的参数和现在的参数，从而得到目前所有的参数
• 2.如果当前参数的长度大于等于fn.length,我们就执行fn函数
  • 我们要把参数传进去就使用了apply，因为没有使用到this指针，这里第一个参数为null
• 3.如果当前参数的长度小于fn.length,我们递归执行_curry函数
  • 同样，我们要传入参数，这里因为传入的参数不是一个数组，所以我们以参数列表的形式用到了call
• call和apply的一个区别就是第二个参数是否是数组！(call是参数列表,一个个的分开的参数)
  • 它们之间可以用扩展运算符来转换哦！

fn.apply(null,_args)
fn.call(null,...args)
// 这两个是一样的

---

function curry (fn, len = fn.length) {
  function _curry (fn, len, ...args) {
    return function (...params) {
      let _args = [...args, ...params]
      if (_args.length >= len) {
        return fn.apply(null, _args)
      } else {
        return _curry.call(null, fn, len, ..._args)
      }
    }
  }
  return _curry(fn, len)
}

function fn (a, b, c, d) {
  console.log(a, b, c, d);
}

let _fn = curry(fn)
_fn(1, 2, 3)(4)      //  1 2 3 4
_fn(4)(5, 6)(7, 8)   //  4 5 6 7 
_fn(4)(5,6)(7)(8)    //  报错

我们一起来看看结果

• 第一个柯里化成功
• 第二个从我们的代码里面也有体现，超出的参数我们就不会计算了
• 第三个报错了，为什么？
  • 前三个括号，我们递归就结束了，下次再传入参数的时候，我们上一层return的不是一个函数，所以报错了
  • 这其实也属于fn.length未知的范畴了，那我们如何处置这种情况呢？继续往下看！

fn.length未知

• 在未知的情况下，我们要保存参数的传递还是只能使用递归
• 但是由于我们不用判断什么时候调用fn，我们使用了闭包来存储我们的参数
• 那么最后我们return的结果会是一个Function函数
  • 最神奇的地方来了，我们判断res==15的时候返回的结果是true，res的类型却是一个Function，原因是这里进行了隐式转换
  • 说简单点，就是自动调用了toString()方法,所以我们可以通过改写toString()方法来解决fn.length未知的问题
• 我们改写toString()函数,使用了reduce，这样可以很方便拿到所有的参数，然后我们写好逻辑就可以了

function add () {
  let args = [...arguments]
  let inner = function () {
    args.push(...arguments)
    return inner
  }
  inner.toString = () => {
    return args.reduce((pre, cur) => {
      return pre + cur
    })
  }
  return inner
}

const res = add(1)(2)(3)(4)(5)
console.log(res == 15);        // true
console.log(res.toString());   // 15

---

• 上面是加法，也可以写成乘法或者其他的逻辑！

放一个彩蛋吧！

• 如果第二种写法的内部函数写成一个匿名函数会怎样?
  • 我们常说ES6 匿名函数很方便，很优雅，这里使用会有问题吗？

function add () {
  let args = [...arguments]
  let inner = () => {        //  这里进行了更改，改为匿名函数了！！！
    args.push(...arguments)
    return inner
  }
  inner.toString = () => {
    return args.reduce((pre, cur) => {
      return pre + cur
    })
  }
  return inner
}

---

• 虽然匿名函数看似少写了点代码很潇洒，但是这里是不行的
• 写成匿名函数，结果add(1)(2)(3)(4)(5)==5结果就错了
  • 内部函数push了arguments
  • 匿名函数的arguments是乱七八糟的
  • 不信你看下面的函数

function test () {
  console.log(arguments);
}
let test2 = () => {
  console.log(arguments[0]);
}
test()   //[Arguments] {}
test2()  //很长，所以要用arguments还是不要用匿名函数了！