如何将函数与参数一同作为实参传入目标函数？

这是个很常见的需求，我给你分享几种实用的实现方案，你可以根据自己的使用场景来选：

方案1：直接传递函数+参数列表（一次性调用） #

这种方式最简单，利用ES6的**剩余参数（Rest Parameters）和展开运算符（Spread Operator）**来实现。wrap函数先接收目标函数foo，然后接收后续所有的参数，最后调用foo的时候把这些参数展开传进去：

function wrap(foo, ...args) {
  // 把传入的参数展开后传给foo
  foo(...args);
}

// 调用示例：传入函数和两个参数
wrap((a, b) => { console.log(a + b); }, 10, 20); // 输出30

方案2：返回闭包延迟传参（可多次调用） #

如果你希望先把目标函数foo传给wrap，之后再根据不同场景传入不同的参数，可以让wrap返回一个闭包函数，这个闭包会记住foo，然后在后续调用时接收参数并执行foo：

function wrap(foo) {
  // 返回一个新函数，这个函数接收参数并调用foo
  return (...args) => {
    foo(...args);
  };
}

// 调用示例：先绑定目标函数，再传入参数
const logSum = wrap((a, b) => { console.log(a + b); });
logSum(5, 3); // 输出8
logSum(100, 200); // 输出300

方案3：利用bind绑定参数（适合需要固定部分参数的场景） #

如果需要给foo固定一部分参数，剩下的参数后续再传，可以结合Function.prototype.bind来实现：

function wrap(foo, ...fixedArgs) {
  // 绑定固定参数，返回一个新函数
  return foo.bind(null, ...fixedArgs);
}

// 调用示例：固定第一个参数为10，后续只传第二个参数
const addTen = wrap((a, b) => { console.log(a + b); }, 10);
addTen(5); // 输出15
addTen(20); // 输出30

这几种方案覆盖了大部分常见场景，你可以根据自己的需求选择最合适的~

内容的提问来源于stack exchange，提问作者rendom