手写 compose 方法，超级详细

前言

大家好，我是CoderBin，本次给大家分享 JS 手撕代码系列，compose 方法的实现，希望大家有所收获，谢谢。

1. 函数作用

通过传递组合函数若干参数（函数），返回一个接收将若干参数的新函数，调用新函数并传递参数即可实现组合函数的效果

2. 总体步骤

1. 先判断参数中是否有非函数，有则抛出异常
2. 返回一个函数
   • 判断是否传入了 fns ，是则调用第一个函数取得结果，否则直接返回args参数
   • 遍历调用传入的每一个函数，每次的 result 都作为下一次函数调用的参数

3. 详细步骤

1. 参数类型判断

• 先取得参数的长度 length

• 利用 for 循环，对传入的每一个参数都进行 typeof 的类型判断，只要遇到了非函数类型的，就抛出异常

2. 返回一个函数

• 实现定义一个索引 index 为 0，用于循环调用函数

• 判断是否传入了 fns ，是则调用第一个函数取得结果 result，否则直接返回args参数

  • 使用 while 循环，条件是索引小于参数的长度，然后进行遍历，使用 call() 调用传入的每一个函数，每次的 result 都作为下一次函数调用的参数

• 在函数里面，返回这个结果

4. 代码实现

/**
 * * 通用组合函数的实现
 * @param  {...any} fns 函数
 * @returns 
 */
function binCompose(...fns) {
  let length = fns.length;
  // 1
  for (let i = 0; i < length; i++) {
    if (typeof fns[i] !== 'function') {
      throw new TypeError('Error');
    };
  };

  // 2
  return function(...args) {
    let index = 0;  
    // 2.1
    let result = length ? fns[index].call(this, args) : args;
    // 2.2
    while (++index < length) {
      result = fns[index].call(this, result);
    }
    return result;
  }
}

5. 测试代码

function double(m) {
  return m * 2
}

function square(n) {
  return n ** 2
}

// 一般写法
console.log(square(double(1))); // 4

// 调用组合函数
var newFn = binCompose(double, square)
console.log(newFn(1)) // 4

6. 细节解析

1. 调用通用组合函数 compose 后，会得到一个新的函数，然后再给这个新函数传值取得结果
2. 由于不清楚会给这个新函数多少个参数，所以在返回一个函数的时候要用展开运算符
3. 代码注释2.1是在循环外先得到 result 结果

7. 核心原理

通过循环，不断地将上一个函数的结果作为当前函数的参数，然后调用获取结果并返回

---

每文一句： 旧书不厌百回读，熟读精思子自知。

本次的分享就到这里，希望大家都能够有所收获。有任何疑问都可以在评论区留言，大家一起探讨、进步！