回调函数中 this 丢失的本质是函数脱离原调用对象而按默认规则绑定；解决关键是建立稳定上下文机制，包括箭头函数捕获、constructor 中 bind、缓存 this 变量及模块内预绑定。
回调函数中 this 丢失，本质是函数脱离了原本的调用对象，执行时按默认规则绑定（非严格模式下指向 window 或 global，严格模式下为 undefined）。解决不是靠“记住规则”，而是建立稳定、可预期的上下文传递机制。
用箭头函数捕获外层 this
箭头函数不创建自己的 this，直接继承定义时所在作用域的 this 值。在 class 内部或事件/定时器设置处使用，最简洁可靠。
- 类方法中定义为类字段：
handleClick = () => { console.log(this.value); }—— 实例化后 this 永远指向该实例 - 定时器中直接写：
setTimeout(() => this.update(), 1000)—— 不用担心执行时 this 变成 window - 事件监听中传入：
button.addEventListener('click', () => this.onClick())—— 闭包天然保住了当前 this
构造时 bind 固定 this 引用
适用于需要复用同一函数引用、又必须用普通函数声明的场景（比如要被多次传给第三方库）。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 在 constructor 中绑定：
this.submit = this.submit.bind(this)，之后可安全传给form.onsubmit = this.submit - 避免在 render 或事件绑定现场反复 bind，否则每次都会生成新函数，影响 React 等框架的 diff 判断
- 注意：bind 返回的是新函数，原方法不受影响；call/apply 是立即执行，不能用于 setTimeout/setInterval
缓存 this 到局部变量（兼容性兜底）
在函数开头用 const self = this 或 const that = this 保存引用，回调中通过闭包访问。虽然略显陈旧，但逻辑清晰、兼容所有环境。
- 适合老项目迁移或需支持 IE 的场景
- 常见于异步嵌套较深时：
const self = this; $.ajax({ success: function() { self.done(); } }); - 注意变量命名一致性，避免混用
self/that/_this造成维护困扰
导出前就绑定好模块级方法
ES 模块顶层 this 是 undefined，导出的方法一旦被解构，就会丢失上下文。不能依赖使用者去 bind，而应在模块内完成绑定。
- 错误写法：
export const handleClick = obj.handleClick;→ 解构后调用必丢 this - 正确做法：
export const handleClick = obj.handleClick.bind(obj);或export const handleClick = () => obj.handleClick(); - 更推荐封装为工厂函数：
export const createHandler = (ctx) => () => ctx.doSomething();，调用方传入上下文，职责更明确
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
