前言

大家好，我是 CoderBin，在面试当中，手撕代码的场景屡见不鲜，手写 JS 当中的方法更是最常见的一种，所以本文将全面的，详细解析compose方法的实现原理，并手写出自己的compose通用组合函数方法，相信看完本文的小伙伴都能从中有所收获????。

创作不易，你们的点赞收藏留言就是我最大的动力????

如果文中有不对、疑惑的地方，欢迎各位小伙伴们在评论区留言指正????

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. 细节解析

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

7. 核心原理

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

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

本次的分享就到这里，如果本章内容对你有所帮助的话欢迎点赞+收藏。文章有不对的地方欢迎指出，有任何疑问都可以在评论区留言。希望大家都能够有所收获，大家一起探讨、进步！

秒客网

通用组合函数 compose 的解析与实现

前言