JavaScript中嵌套函数的this丢失是因为调用方式决定this值，而非作用域链失效；修复方式包括self=this、箭头函数、bind()等，其中箭头函数最推荐。
在 JavaScript 中，嵌套函数内部的 this 会丢失外层上下文，不是因为“作用域链失效”，而是因为函数调用方式决定 this 值——普通调用（如 fn()）时，this 指向全局对象（非严格模式）或 undefined（严格模式），与外层函数的 this 无关。
为什么嵌套函数中 this 会丢失
每个函数执行时，this 的值由**调用位置和调用方式**决定，而非定义位置。即使函数写在外层方法内部，只要它被直接调用（比如作为回调、定时器、事件处理器等），this 就会重绑定。
- 外层方法的
this是通过对象调用确定的（如obj.method()） - 内层匿名函数若单独执行（如
setTimeout(function(){...}, 100)），就属于“独立调用”，this不继承外层 - 箭头函数例外：它不绑定自己的
this，而是沿作用域链向上找外层函数的this
用 self = this 保存引用（传统修复方式）
在进入嵌套前，把当前 this 赋给一个变量（常见命名有 self、that、_this），让内层函数通过闭包访问它。
示例：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
const obj = {
name: 'Alice',
greet() {
const self = this; // 保存外层 this
setTimeout(function() {
console.log('Hello, ' + self.name); // 正确访问 obj.name
}, 100);
}
};
obj.greet(); // 输出：Hello, Alice
更现代、更推荐的替代方案
self = this 有效但略显冗余，现在有更简洁、语义更清晰的方式：
-
使用箭头函数：自动继承外层
this，无需手动保存greet() { setTimeout(() => console.log('Hello, ' + this.name), 100); } -
用 bind(this) 显式绑定：
setTimeout(function() { ... }.bind(this), 100) -
传参代替依赖 this（适合逻辑简单场景）：
setTimeout((name) => console.log('Hello, ' + name), 100, this.name)
注意 this 丢失的典型场景
除了 setTimeout，以下情况同样常见：
- 事件监听器：
button.addEventListener('click', function() { console.log(this); })→this是 button，但如果写成button.addEventListener('click', handler)且handler是普通函数，又在内部调用嵌套函数，就可能丢失 - 数组方法回调：
arr.map(function(item) { return this.id + item; })→this不是外层对象，除非显式传入第二个参数map(..., this) - Promise 回调：
promise.then(function() { this.doSomething(); })→ 同样独立调用，this丢失
本质上，修复的关键不是“阻止丢失”，而是确保内层能访问到需要的对象上下文——用闭包（self）、语法糖（箭头函数）、或 API 支持（bind、call、map 的 thisArg）都可达成目标。箭头函数在绝大多数嵌套回调场景下是最轻量自然的选择。
