在 javascript 多层嵌套函数中，this 易丢失原始上下文，传统方案是用 const _this = this 缓存外层 this 值供内层安全访问，适用于回调、定时器、事件监听等异步场景。
在 JavaScript 中，多层嵌套函数里 this 容易丢失原始上下文，尤其在回调、定时器、事件监听等异步场景下。用 _this = this（或更常见的 const self = this）是一种传统但有效的手动绑定方式，核心是把外层函数的 this 值“缓存”到一个变量中，供内层函数安全访问。
为什么嵌套函数中 this 会丢失
普通函数（非箭头函数）的 this 是在**调用时**决定的，而不是定义时。嵌套函数如果被单独调用（比如作为回调传给 setTimeout、addEventListener 或数组方法），它的 this 就会变成全局对象（非严格模式）或 undefined（严格模式），不再指向外层对象。
例如：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
const obj = {
name: 'Alice',
sayHi() {
console.log(this.name); // 'Alice'
function inner() {
console.log(this.name); // undefined（严格模式）
}
inner();
}
};
obj.sayHi();
```
用 _this = this 保存上下文
在进入嵌套前，把当前 this 赋值给一个变量（如 const _this = this），内层函数通过该变量访问原始对象属性和方法。
- 变量名常用
self、_this或that，语义清晰即可 - 必须在内层函数定义前赋值，且作用域要能被内层访问（通常在同级或外层函数体顶部）
- 适用于所有函数类型（包括普通函数、匿名函数、IIFE），不依赖语法糖
const obj = {
name: 'Alice',
age: 28,
sayHi() {
const _this = this; // ✅ 缓存 this
console.log(_this.name); // 'Alice'
function inner() {
console.log(_this.name); // 'Alice' —— 访问的是缓存值
console.log(_this.age); // 28
}
inner();
}
};
obj.sayHi();
```
常见实际场景中的用法
这个技巧在早期 ES5/ES6 项目中广泛用于处理异步回调中的 this 绑定问题：
-
事件监听器中：
button.addEventListener('click', function() { console.log(_this.name); }) -
定时器中：
setTimeout(function() { _this.updateUI(); }, 100) -
数组方法回调中：
items.map(function(item) { return _this.transform(item); }) -
AJAX 回调中（如原生
XMLHttpRequest或旧版 jQuery）
现代替代方案与注意事项
_this = this 有效但略显冗余。现代开发中更推荐以下方式：
-
箭头函数：不绑定自己的
this，自动继承外层词法作用域的this（最简洁） -
Function.prototype.bind()：显式绑定
this，适合需复用的回调 -
class 字段 + 箭头函数（React 等框架常用）：
handleClick = () => { console.log(this.state); } - 注意：不要在箭头函数内部再用
_this = this——箭头函数本就不改变this，这么做无意义
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
