当前位置：首页 > news >正文

JavaScript 回调函数（Callbacks）

news 2026/5/16 20:57:44

本文全面讲解 JavaScript 回调：同步 / 异步回调、错误优先模式、回调地狱、Promise 诞生原因，是前端异步编程核心基础。

为什么 JavaScript 不会等待？

当你设置定时器、发起网络请求、监听点击时，代码为何能继续运行而不卡住？

console.log('Before timer') setTimeout(function() { console.log('Timer fired!') }, 1000) console.log('After timer') // 输出： // Before timer // After timer // 1秒后：Timer fired!

答案就是回调（callback）：把函数传给另一个函数，告诉它 “做完后调用我”。

MDN 定义：回调函数是被当作参数传入另一个函数，并在外部函数内部被调用的函数。

回调支撑了 JavaScript 所有异步逻辑：事件、定时器、网络请求全都依赖它。

本文你将学到

什么是回调，为什么 JS 需要回调
同步回调 vs 异步回调
回调与高阶函数的关系
常见回调模式（事件、定时器、数组方法）
错误优先回调模式（Node 规范）
回调地狱（厄运金字塔）
如何逃离回调地狱
Promise 为何被发明

前置知识：事件循环、高阶函数。

什么是回调？

回调是作为参数传给另一个函数，并在之后被执行的函数。由另一个函数决定何时（或是否）执行它。

// greet 是回调函数 function greet(name) { console.log(`Hello, ${name}!`) } // processUserInput 接收回调 function processUserInput(callback) { const name = 'Alice' callback(name) // 回调执行 } processUserInput(greet) // Hello, Alice!

“回调” 的含义：做完事情后再叫你。像餐厅叫号器：“桌位好了我叫你”。回调就是普通函数，只是使用方式特殊：传给别人，晚点执行。

回调可以是匿名的

// 具名函数 button.addEventListener('click', handleClick) // 匿名函数 button.addEventListener('click', function() { console.log('Clicked!') }) // 箭头函数 button.addEventListener('click', () => { console.log('Clicked!') })

具名函数更易调试、可复用。

餐厅叫号器类比

你下单 → 调用函数并传入回调
拿到叫号器 → 函数注册回调
你去坐下 → 代码继续执行（非阻塞）
叫号器响 → 异步操作完成
取餐 → 回调执行

核心：不等待，不阻塞，这是 JS 保持快速的原因。

回调与高阶函数

高阶函数：接收函数作为参数或返回函数
回调：被传给高阶函数的那个函数

const numbers = [1,2,3] numbers.forEach((num) => { // 箭头函数 = 回调 console.log(num * 2) })

map/filter/forEach/reduce/sort/find全都是高阶函数，都在使用回调。

同步回调 vs 异步回调

同步回调

立即执行，阻塞，调用期间完成。

const doubled = [1,2,3].map(num => num * 2)

常见场景：数组方法、字符串替换、对象遍历。

异步回调

稍后执行，非阻塞，通过事件循环运行。

setTimeout(() => { console.log('异步') }, 0)

常见场景：定时器、事件监听、网络请求、Node I/O。

对比表

表格

方面	同步回调	异步回调
执行时机	立即执行	稍后执行（事件循环）
是否阻塞	是	否
示例	map/filter/forEach	setTimeout/addEventListener/fetch
错误处理	try/catch 有效	try/catch 无效
返回值	可返回	通常被忽略

关键区别：错误处理

// 同步：try/catch 有效 try { [1,2,3].forEach(num => { if (num === 2) throw new Error('Found 2!') }) } catch (e) { console.log('捕获到：', e.message) } // 异步：try/catch 无效！ try { setTimeout(() => { throw new Error('异步错误') }, 100) } catch (e) { // 永远不会执行 }

原因：异步回调运行时，try/catch早已执行完毕，不在同一个调用栈。

回调与事件循环的工作流程

代码执行，注册异步回调
Web API 处理异步操作（定时器 / 网络 / I/O）
操作完成 → 回调进入任务队列
调用栈空 → 事件循环把回调推入栈执行

示例执行顺序：

console.log(1) setTimeout(()=>console.log(2), 0) setTimeout(()=>console.log(3), 0) console.log(4) // 输出：1 → 4 → 2 → 3

常见回调模式

1. 事件处理（最常用）

button.addEventListener('click', (e) => { console.log('点击', e.target) })

2. 定时器

setTimeout(() => {}, 2000) setInterval(() => {}, 1000)

3. 数组迭代（同步回调）

forEach：遍历
map：转换
filter：筛选
find：查找第一个
reduce：聚合

4. 自定义回调

function fetchData(id, callback) { setTimeout(() => { callback({ id, name: 'Alice' }) }, 1000) }

错误优先回调模式（Node 风格）

Node.js 统一异步错误处理规范：第一个参数永远是错误，第二个是结果

function callback(error, result) { ... }

示例：

fs.readFile('config.json', 'utf8', (err, data) => { if (err) { console.error('读取失败', err) return } console.log(data) })

优点：统一、强制检查错误、早期返回、适配异步无法捕获异常。

回调地狱（厄运金字塔）

多层异步依赖导致深度嵌套，代码向右无限延伸：

getUser(userId, (err, user) => { verifyPassword(user, pw, (err, valid) => { getProfile(user.id, (err, profile) => { getSettings(user.id, (err, settings) => { renderDashboard(...) }) }) }) })

问题：难读、难调试、难维护、重复错误处理、作用域混乱。