回调函数是将函数作为参数传入并在异步任务完成时调用的机制，用于处理AJAX、事件等异步操作，需注意嵌套过深、this指向及错误处理。
JavaScript 中回调函数是处理异步操作和传递后续逻辑最基础、最直接的方式——它把“等某个任务做完后要做的事”提前定义好，交给异步任务去调用。
回调函数的本质：把函数当参数传进去
回调函数不是特殊语法，只是把一个函数作为参数传给另一个函数。后者在合适时机（比如数据加载完成、定时器触发、事件发生）调用它。
- 普通同步示例：`setTimeout(() => console.log('执行了'), 1000)` 中的箭头函数就是回调
- 异步场景常见：AJAX 请求、文件读取、数据库查询、用户点击事件都依赖回调来响应结果
- 关键点：回调函数本身不立即执行，而是被“延迟委托”，由异步操作的执行者决定何时调用
用回调处理异步请求（如 fetch 或 XMLHttpRequest）
原生 fetch 默认返回 Promise，但若想用纯回调风格，可手动封装：
function fetchData(url, onSuccess, onError) {
fetch(url)
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data => onSuccess(data))
.catch(err => onError(err));
}
// 使用方式
fetchData(
'/api/user',
data => console.log('拿到用户数据:', data),
err => console.error('请求失败:', err)
);
这里 onSuccess 和 onError 就是典型的回调函数，分别承接成功与失败路径的后续逻辑。
立即学习“Java免费学习笔记（深入）”；
避免“回调地狱”：控制嵌套深度
多个异步操作顺序依赖时，容易写出多层嵌套的回调（即“金字塔结构”），可读性和维护性差：
// ❌ 不推荐：层层嵌套
getData((a) => {
getMoreData(a, (b) => {
process(b, (c) => {
save(c, () => console.log('完成'));
});
});
});
改善方法：
- 将每个回调抽成独立命名函数，减少缩进（提升可读性）
- 使用命名函数替代匿名函数，方便调试和复用
- 优先考虑 Promise 链或 async/await —— 它们本质仍是基于回调，但语法更平铺直叙
回调中注意 this 指向与错误处理
回调函数执行时，this 默认指向全局对象（非严格模式下是 window 或 global），容易出错：
- 用
bind(this)、箭头函数或call/apply显式绑定上下文 - 始终为回调提供错误分支（哪怕只是
console.error），防止异常静默丢失 - 不要在回调里抛出未捕获错误，尤其在事件监听或定时器中，可能中断后续执行
例如：button.addEventListener('click', () => this.handleClick()) 比 button.addEventListener('click', this.handleClick) 更安全，后者会丢失 this。
