JavaScript 中 this 绑定怎么在嵌套函数中丢失并使用 self 变量修复-js教程-PHP中文网

javascript中嵌套函数的this丢失是因为调用方式决定this值，而非作用域链失效；修复方式包括self=this、箭头函数、bind()等，其中箭头函数最推荐。

javascript 中 this 绑定怎么在嵌套函数中丢失并使用 self 变量修复

在 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、数据库、前端框架），记在

下载

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 丢失