本文详解 compose 函数为何无需显式传入 data 即可工作——它返回一个新函数，该函数在被调用时才接收数据，从而实现函数的延迟执行与组合复用。
本文详解 `compose` 函数为何无需显式传入 `data` 即可工作——它返回一个新函数，该函数在被调用时才接收数据，从而实现函数的延迟执行与组合复用。
在 JavaScript 中，高阶函数（Higher-Order Function）是指接受函数作为参数、或返回函数作为结果的函数。compose(humans, images) 正是这一理念的典型体现：它本身不立即处理数据，而是构造并返回一个等待数据的新函数。
我们来逐步拆解其执行逻辑：
function compose(func1, func2) {
return function(data) { // ← 关键：返回一个带 data 参数的函数
return func2(func1(data)); // 先执行 func1(data)，再将结果传给 func2
};
}
var displayCharacterImages = compose(humans, images);
// 此时 displayCharacterImages 并不是值，而是一个函数：
// function(data) { return images(humans(data)); }
这意味着：
✅ compose(humans, images) 立即执行，但只做一件事：定义并返回一个闭包函数；
✅ data 并非在 compose 调用时传入，而是在后续调用 displayCharacterImages(...) 时才传入；
✅ humans 和 images 通过闭包“记住”了各自的函数引用，data 流经它们形成管道：data → humans → images → 结果。
✅ 实际调用示例
const characters = [
{ name: 'Luke', species: 'human', img: '/luke.jpg' },
{ name: 'Chewie', species: 'wookie', img: '/chewie.jpg' },
{ name: 'Leia', species: 'human', img: '/leia.jpg' }
];
const humanImages = displayCharacterImages(characters);
console.log(humanImages);
// 输出: ['/luke.jpg', '/leia.jpg']
? 注意：
displayCharacterImages是compose返回的函数，它“封装”了humans和images的执行顺序，并将data作为唯一输入入口——这正是函数式编程中“数据驱动流程”的核心思想。
⚠️ 常见误区提醒
- ❌ 错误理解：“
compose(humans, images)就会立刻处理数据” → 实际它只是准备好了处理逻辑； - ❌ 忘记调用：
displayCharacterImages不加括号()就只是函数引用，不会触发任何计算； - ✅ 正确姿势：
compose是“配方生成器”，displayCharacterImages(...)才是“按方抓药”。
掌握这种“返回函数、延迟求值”的模式，是深入理解 Redux applyMiddleware、Lodash flowRight、甚至 React Hooks（如 useCallback）的关键基础。
