回调函数中无法直接修改外层变量是因异步执行时机与作用域隔离所致；应将依赖逻辑置于回调内或用async/await串行处理，避免同步读取未赋值变量。
回调函数里改不了外层变量？先搞清作用域和执行时机
JavaScript 中回调函数不是“立即执行”，而是被推入任务队列，等同步代码跑完才执行。这意味着你在回调里赋值的变量，如果外层用 let 或 const 声明且没等回调完成就去读，大概率拿到的是初始值或 undefined。
常见错误写法：
let data;
fetch('/api/user').then(res => res.json()).then(d => { data = d; });
console.log(data); // undefined —— 此时回调根本还没执行
正确思路不是“怎么让回调快点跑”，而是“所有依赖异步结果的逻辑，必须放在回调内部、或用 async/await 串起来”：
- 把后续操作（如渲染、计算）放进
.then()链里 - 或者用
async函数包裹，用await等待 Promise 完成后再继续 - 避免在回调外直接访问未初始化的变量，尤其别在全局作用域里靠“延迟几秒再读”来 hack
嵌套回调（callback hell）怎么破？优先用 Promise 链或 async/await
三层以上 setTimeout 或 fs.readFile 套用回调，代码会迅速变成向右滑动的“金字塔”。这不是风格问题，是可维护性灾难：错误处理分散、复用困难、调试路径断裂。
立即学习“Java免费学习笔记（深入）”；
Promise 链能线性表达流程：
getUser(id) .then(user => getPosts(user.id)) .then(posts => filterActive(posts)) .then(renderList) .catch(err => showError(err));
而 async/await 更贴近同步写法，但要注意：
-
await只能在async函数内用，不能直接写在顶层模块（ES2017+ 支持顶层await，但 Node.js 和部分浏览器仍有兼容限制） -
await后面必须是 Promise，传普通值会立刻 resolve - 多个异步操作若无依赖关系，别傻乎乎串着
await，用Promise.all([p1, p2])并发执行更高效
错误没被捕获？检查 Promise 拒绝状态和 try/catch 范围
Promise 的错误不会自动冒泡到外层 try/catch，除非你显式用 .catch() 或在 await 外包一层 try/catch。
下面这段代码的错误永远不会被打印：
try {
fetch('/bad-url').then(r => r.json());
} catch (e) {
console.error(e); // 不会触发
}
因为 fetch 返回的 Promise 被拒绝后，会跳过 then 的第一个参数，但没人接住这个 rejection —— 它成了 unhandled rejection。
正确做法：
- 链式调用末尾加
.catch()，或 - 在
async函数中用try/catch包住整个await表达式 - Node.js 中可通过监听
process.on('unhandledRejection', ...)做兜底，但别依赖它代替主动错误处理
回调函数里 this 指向丢失？绑定方式选对了没
传统回调（比如事件监听器、setTimeout 回调）中，this 默认指向全局对象（浏览器是 window，严格模式下是 undefined），而不是你期望的类实例或上下文对象。
三种常用修复方式：
- 用箭头函数：
element.addEventListener('click', () => this.handleClick())—— 箭头函数不绑定自己的this，继承外层词法作用域 - 用
.bind(this)：setTimeout(this.handleTimeout.bind(this), 1000) - 在构造函数里提前绑定：
this.handleClick = this.handleClick.bind(this)，适合多次复用的回调
注意：async 函数本身也是函数，如果作为回调传入（如 btn.addEventListener('click', this.handleSubmit)），依然会丢失 this，绑定逻辑不能省。
真正麻烦的不是语法怎么写，而是得时刻意识到：只要函数被“传递出去再调用”，this 就可能变。不查控制台报错里的 this 是什么，光看代码容易漏掉。
