如何在JavaScript中存储带参数的回调函数数组并顺序执行？

你的代码报错的核心问题是——数组里存的不是可调用的函数，而是函数执行后的返回值。当你写doThis("foo")时，JavaScript会立刻执行这个函数，把它的返回结果放进数组。如果doThis没有返回一个函数，后续callback()自然会提示“表达式不可调用”。

下面是几种可行的解决方法：

方法1：用匿名函数包裹调用逻辑 #

把带参数的函数调用包在一个匿名函数里，数组里存储的就是这个匿名函数本身，后续遍历调用时才会执行目标函数：

var callbacks = [
  function() { doThis("foo"); },
  function() { doThat("bar"); }
];

function doThis(a) {
  console.log("执行doThis，参数：", a);
}

function doThat(b) {
  console.log("执行doThat，参数：", b);
}

callbacks.forEach(function(callback) {
  callback();
});

方法2：ES6箭头函数（更简洁） #

如果你的环境支持ES6+，用箭头函数可以让代码更清爽：

const callbacks = [
  () => doThis("foo"),
  () => doThat("bar")
];

function doThis(a) {
  console.log("执行doThis，参数：", a);
}

function doThat(b) {
  console.log("执行doThat，参数：", b);
}

callbacks.forEach(callback => callback());

方法3：用bind绑定参数 #

利用bind()方法生成一个绑定了参数的新函数，数组里存储这个新函数：

var callbacks = [
  doThis.bind(null, "foo"),
  doThat.bind(null, "bar")
];

function doThis(a) {
  console.log("执行doThis，参数：", a);
}

function doThat(b) {
  console.log("执行doThat，参数：", b);
}

callbacks.forEach(function(callback) {
  callback();
});

这里bind的第一个参数是函数执行时的this上下文，如果你的函数不需要特定this，传null或undefined即可，后面的参数就是要预传给目标函数的值。

方法4：把目标函数改成高阶函数 #

如果可以修改doThis和doThat，让它们返回一个函数（即高阶函数），这样原代码的写法就能正常工作：

function doThis(a) {
  // 返回一个带参数逻辑的函数
  return function() {
    console.log("执行doThis，参数：", a);
  };
}

function doThat(b) {
  return function() {
    console.log("执行doThat，参数：", b);
  };
}

// 此时doThis("foo")返回的是可调用的函数，直接存在数组里即可
var callbacks = [
  doThis("foo"),
  doThat("bar")
];

callbacks.forEach(callback => callback());

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