JS面试手写：函数柯里化

函数柯里化是函数编程里面一个重要的概念：把接收多个参数的函数，变成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下参数的函数，而且返回结果是新函数的技术。

说人话：一次只给函数一部分参数来调用函数，之后函数会返回一个函数去处理剩余的参数。

一个简单的函数柯里化例子：

// 普通的有多个参数的函数
function add(x, y, z) {
  return x + y + z
}

var result = add(10, 20, 30)
console.log(result)

// 柯里化之后
function sum1(x) {
  return function(y) {
    return function(z) {
      return x + y + z
    }
  }
}

var result1 = sum1(10)(20)(30)
console.log(result1)

// 简化柯里化的代码
var sum2 = x => y => z => x + y + z 
console.log(sum3(10)(20)(30))

实现自动柯里化幻术：将普通函数转成柯里化函数

function add1(x, y, z) {
  return x + y + z
}

// 柯里化函数的实现hyCurrying
function hyCurrying(fn) {
  function curried(...args) {
    // 判断当前已经接收的参数的个数, 可以参数本身需要接受的参数是否已经一致了
    // 1.当已经传入的参数 大于等于 需要的参数时, 就执行函数
    if (args.length >= fn.length) {
      // 这里用apply绑定this是为了让最后调用fn时候的this与外界保持一致，比如调用curried时，
			// 用了：curryAdd.call({}),那么最终调用fn函数时候，this也要指向这个对象 
      return fn.apply(this, args)
    } else {
      // 没有达到个数时, 需要返回一个新的函数, 继续来接收的参数
      function curried2(...args2) {
        // 接收到参数后, 需要递归调用curried来检查函数的个数是否达到
        return curried.apply(this, args.concat(args2))
      }
      return curried2
    }
  }
  return curried
}

var curryAdd = hyCurrying(add1)


console.log(curryAdd(10, 20, 30))
console.log(curryAdd(10, 20)(30))
console.log(curryAdd(10)(20)(30))

面试题：

/**
 * 实现一个组合compose的方法，使其可以正确调用每个中间件
 *
 * 规定中间件写法：
 * function(val, next) {
 *    // 前置操作
 *    next(val + 1); // 触发下一个中间件
 *    // 后续操作
 * }
 */
function compose(...middlewares) {

}

function add1(x, next) {
  console.log('add1 before');
  next(x + 1);
  console.log('add1 after');
}

function add2(x, next) {
  console.log('add2 before');
  next(x + 2);
  console.log('add2 after');
}

function output(x){
    console.log('output:', x)
}

const input = 0;
compose(add1, add2, output)(input);
/**
 * 输出:
 *
 * add1 before
 * add2 before
 * output: 3
 * add2 after
 * add1 after
 */

解决方法：

function compose(...middlewares) {
  return function (x) {
    // 形成了一个闭包，每次调用返回函数的时候，都会将middlewares缓存的执行函数出队一个
    let fn = middlewares.shift();
    // 这里就是调用出队的函数，同时第二个参数是下一层新返回的function (x)，此时这个返回的函数没有调用，直到next执行的时候才会去调用
    fn(x, compose(...middlewares));
  };
}

function add1(x, next) {
  console.log("add1 before");
  next(x + 1);
  console.log("add1 after");
}

function add2(x, next) {
  console.log("add2 before");
  next(x + 2);
  console.log("add2 after");
}

function output(x) {
  console.log("output:", x);
}

const input = 0;

// compose(add1, add2, output)只是拿到了返回的函数并没有执行返回的函数，(input)才是调用返回的函数
compose(add1, add2, output)(input);