回调函数传参的实用技巧与常见误区

写代码时经常会遇到需要把一个函数作为参数传给另一个函数的情况，这就是所谓的回调函数。但很多时候，我们不只想传个函数名，还想顺便带点数据过去，这就引出了一个问题：怎么在调用回调的时候把额外的参数传进去？

直接传参的困境

比如你有个函数用来处理用户点击按钮后的操作：

function handleClick(callback) {
    callback();
}

如果直接调用 handleClick(alert)，确实能弹出提示框，但只能显示默认内容。你想让它弹出“用户已登录”，怎么办？直接写 handleClick(alert('用户已登录')) 是不行的，因为这会立刻执行 alert，而不是把它当作函数传进去。

用匿名函数包一层

最简单的办法是套个壳：

handleClick(function() {
    alert('用户已登录');
});

或者用箭头函数更简洁：

handleClick(() => alert('用户已登录'));

这种方式灵活又直观，适合大多数场景。你在写事件监听器、定时任务或者异步请求后处理结果时，基本都是这么干的。

利用 bind 方法预设参数

JavaScript 的 bind 可以预先绑定函数的上下文和部分参数。比如你有这样一个通用回调：

function logMessage(user, action) {
    console.log(`${user} 执行了 ${action}`);
}

你可以提前把用户名固定住：

const logForAlice = logMessage.bind(null, 'Alice');
handleClick(logForAlice); // 输出：Alice 执行了 undefined

这时候只需要再补上 action 就行了。如果你在循环中注册多个带不同参数的回调，bind 能避免闭包问题，比直接用 var 声明更安全。

通过第三个参数传递数据

有些 API 设计本身就支持额外传参。比如数组的 forEach 方法允许你传第二个参数作为 this 上下文，而像 setTimeout 其实可以从第三个参数开始往后传，这些都会被原封不动地交给回调函数：

setTimeout(function(name, age) {
    console.log(`欢迎 ${name}，${age} 岁`);
}, 1000, '小明', 25);

虽然不是所有环境都完美支持这种写法，但在现代浏览器里完全可用，写起来干净利落。

封装成配置对象更清晰

当你要传的参数变多时，可以考虑把回调和它的参数打包成一个对象：

function executeWithConfig(config) {
    config.callback.apply(null, config.args);
}

executeWithConfig({
    callback: alert,
    args: ['警告：磁盘空间不足']
});

这种方式让逻辑更集中，尤其适合构建工具函数库或插件系统。

实际开发中，回调函数传参几乎是每天都会碰到的事。掌握几种不同的传参方式，能让你写出更灵活、更易维护的代码。关键是在合适的场景选择合适的方法，别让简单问题复杂化。