javascript中的回调函数是什么以及如何使用？【教程】

回调函数是将函数作为参数传入并由接收方控制执行时机的机制，常用于异步操作、事件监听和数组方法，需注意this丢失、回调地狱、错误处理及类型校验等问题。

回调函数就是“等别人忙完再执行的函数”

它不是特殊语法，只是把函数当参数传给另一个函数，让后者在合适时机调用它。关键在于“时机由接收方控制”，不是你写完就立刻跑。

常见场景：异步操作（如 fetch、setTimeout）、事件监听（addEventListener）、数组遍历（map、filter）。

• 传函数时别加括号：doSomething(callback) ✅，doSomething(callback()) ❌（后者是立即执行结果）
• 回调函数内部 this 容易丢失，尤其在对象方法中被当作参数传出去时
• 嵌套多层回调（“回调地狱”）会让逻辑难读难维护，现代代码优先用 Promise 或 async/await

怎么写一个接受回调的函数

只要函数内部在某个时刻调用传入的函数参数，它就算支持回调。不需要额外关键字或修饰。

function loadData(url, callback) {
  setTimeout(() => {
    const data = { id: 1, name: 'test' };
    callback(null, data); // 第一个参数习惯留作 error
  }, 100);
}

• 约定俗成：Node.js 风格回调第一个参数是 error，第二个起是数据；浏览器 API（如 setTimeout）通常不传 error
• 务必检查回调是否为函数：if (typeof callback === 'function') callback()，避免运行时报 TypeError: callback is not a function
• 不要假设回调一定同步执行——它可能异步、可能同步，取决于你写的逻辑

常见错误：为什么我的回调没执行？

不是语法报错，而是逻辑静默失败，最容易卡住人。

• 忘记传回调：调用 loadData('/api') 没给第二个参数 → 后续 callback(...) 直接报错
• 传了但拼错名：loadDa

  

  ta('/api', hander)（少个 l），而变量 hander 是 undefined
• 异步中用了 let 块级变量，回调里访问时已销毁（少见但真实发生过）
• 回调里抛错没捕获，导致整个流程中断却不提醒你——加 try/catch 或统一错误处理

和 Promise / async await 的关系

回调不是过时，而是基础。所有 Promise 的 .then()、.catch()，以及 async 函数里的 await，底层都依赖回调机制。

• new Promise((resolve, reject) => {...}) 里的 resolve 和 reject 就是回调
• async 函数返回 Promise，本质是把回调链自动展开，避免手动传参嵌套
• 有些老库只提供回调接口（如早期 MongoDB Driver），你得用 util.promisify 包一层才能 await

真正该警惕的不是回调本身，而是没设计好执行顺序、没处理好错误流向、没约束好参数类型。这些毛病换 Promise 一样存在。