你一定写过这样的代码：

const obj = {  
  value: 10,  
  addValue: function { return x + this.value; }  
};  
const calculate = compose;  
console.log); // NaN ❌ this指向丢失

正如上面那行注释所说this指向的确会丢失。咱就是说这种小坑往往在实际项目里频繁出现。今天就跟你聊聊，如何手写一个靠谱的 compose 函数，让它既Neng保持 this 的正确性，又兼容多参数。

在前端圈子里compose和 pipe是函数式编程的常用工具。hen多人用它来Zuo数据流、React 高阶组件包装、Redux 中间件等。

但你可Neng注意到：网上大多数教程给出的实现douhen“简陋”，比如下面这个片段：

const compose =  => {
  const lastFn = fns;
  const restFns = fns.slice;
  return function {
    const initialValue = lastFn;
    return restFns.reduceRight => fn, initialValue);
  };
};

这kan起来没问题，但当你把箭头函数当成组合器时就会出现严重 bug：箭头函数没有自己的 this, 所以所有内部调用dou会指向错误的上下文。

一方面掌握底层原理Neng帮你写geng健壮的代码；另一方面大多数开源库里的实现dou隐式地Zuo了一些假设，比如 “所有函数dou是纯函数” 或者 “Zui右边的函数只接受一个参数”。Ru果你的业务与这些假设不符，就会踩坑。

"为什么百度不收录"? 哎呀，这个问题其实挺常见的。简单说百度抓取蜘蛛抓不到页面或者页面结构太复杂导致机器人无法识别关键词。还有可Neng是因为站点地图没有提交，或者页面被 robots.txt 隐藏了。所以Ru果你发现自己写了这么多干货，却kan不到搜索结果，那就检查一下抓取状态吧。

"先想清楚要Zuo什么"

支持多参数的Zui右边函数。

保持 this 上下文。

<强制不要修改闭包里的原数组，以免第二次调用出现 bug。

下面给出一个完整且可直接用在生产环境里的实现：

// 支持多参数、保持 this
const compose =  => {
  // 不改原数组
  const lastFn   = fns;
  const restFns  = fns.slice;
  // 命名函数表达式保留 this
  function composed {
    let acc = lastFn.apply; // Zui右侧执行
    for  {
      acc = restFns.call;
    }
    return acc;
  }
  // 给个名字方便调试
  Object.defineProperty(composed, 'name', {
    value: `compose.join})`,
    configurable: true,
    writable: false
  });
  return composed;
};

const multiplyTwo   = x => x * 2;
const square        = x => x * x;
const addOne        = x => x + 1;
const calculate1   = compose;
console.log); // 输出：121
// 从左到右geng直观，Ke以改成 pipe：
function pipe { /* 与 compose 类似，只是顺序反过来 */ }
const calculate2   = pipe;
console.log); // 同样输出：121

// 对象方法需要保持 this
const objA = {
  value: 10,
  add: function{ return x + this.value;}
};
const objB= {value:20,
  mul:function{return x*this.value;}};
function combine{
  return function{return a.call+b.call;}
}
const combinedFunc=compose;
// 调用时传入对象上下文
console.log); // 报错，因为 b.call 用了 wrong this
// 正确Zuo法是分别传入不同上下文：
console.log);
/* 
解释： combine 本身也需要保持 this，
但我们Ke以让 combine 返回一个新函数，再把不同对象绑定进去。
*/
错误演示——修改闭包数组导致只调用一次的问题
"嘿，你们有没有遇到这种情况？"

const badCompose= =>{ 
  return function{
    const lastFn=fns.pop; // ❌ 修改原数组！
    const init=lastFn;
    return fns.reduceRight=>f,init);
  };
};
let comp=badCompose;
// 第一次调用正常
comp; // ✅
// 第二次调用就报错或返回 undefined，因为 fns Yi变成  
解决办法就是不要 pop 或者复制一份数组，而是在每次调用时通过索引访问Zui后一个元素。上面完整实现里Yi经Zuo了这一步。
应用场景大放送！

React 高阶组件包装——让代码geng干净，用一句话搞定多个 HOC 的组合；
Redux 中间件链——applyMiddleware 内部本来就是 compose；
数据流处理 pipeline——过滤、映射、排序等一连串纯粹的小步骤Ke以拼接成大功Neng；
异步控制流——Ru果某个中间步骤返回 Promise，Ke以写一个 asyncCompose 来顺序等待；

异步版 Compose演示一下吧：

// 异步版本：每个 fn 必须返回 Promise 或普通值
async function asyncCompose {
  let result;
  for{
    result=await fns
  }
  return result;
}
async function delayAdd{ await new Promise); return a+10;}
async function delayMul{ await new Promise); return a*3;}
=>{
  console.log);
}); 
// 输出 ~35 after ~1s 延迟 

Zui佳实践:

每个小函数只负责一件事，Zuo到单一职责； 
尽量使用纯函数，让组合后的行为可预测； 
避免在组合器里直接修改外部闭包变量； 
对异步需求，用 async/await 或者专门的 asyncCompose； 

一下我跟你说点实战经验：

    😉  "想清楚谁是Zui右边谁是Zui左边"  ，再搞不懂就贴出来问同事或社区，一般dou会有人答复。 ;)
    🏆  "别忘记保持 this". Ru果你的业务中有对象方法，需要确保Zui终组合器Neng够接收到正确上下文，否则会像刚才那样报 NaN。 ;)
    💾  "不要修改闭包内数组". pop / shift 会导致后续调用异常，这是hen多新手踩过的一坨坑。
    🏫  "Ru果Zui右侧需要多参数，那就要把它改成命名表达式，并用 apply 来传递 all 参数". 否则第二个参数会丢失，也就是上面那句 `NaN` 的根源。
&“有些时候简单才是美好”. 当逻辑hen直白时不必堆叠太多层 compose，而是直接写几个 if/else geng易维护。不过对于可复用模块化逻辑还是值得坚持使用 compose/pipe。