嵌套普通函数会丢失this，因其this动态绑定且取决于调用方式；直接调用触发默认绑定（非严格模式指向window，严格模式为undefined）；可用that/self缓存、箭头函数继承外层this或bind显式绑定解决。

对象方法里写嵌套的普通函数，this 会丢，是因为普通函数的 this 是动态绑定的——它只看“谁调用它”，不看“它写在哪”。一旦嵌套函数脱离了对象方法的调用形式（比如传给 setTimeout、addEventListener 或直接调用），就变成独立函数调用，触发默认绑定：非严格模式下指向 window，严格模式下是 undefined。

为什么嵌套普通函数会丢失 this

关键不是“嵌套”本身，而是调用方式变了。例如：

const obj = {
  name: 'Tom',
  say() {
    function inner() { console.log(this.name); }
    inner(); // ❌ this 指向 window 或 undefined，不是 obj
  }
};

这里 inner() 是直接调用，没有通过 obj.say().inner() 这种方式，所以它和 obj 完全无关。

立即学习“Java免费学习笔记（深入）”；

用 that / self 缓存外层 this

在嵌套前把当前 this 存下来，嵌套函数里用变量访问，兼容性最好，逻辑最直白：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 在方法开头声明 const that = this; 或 const self = this;
• 嵌套函数里统一用 that.xxx 或 self.xxx 访问属性或方法
• 适合老项目、需要支持 IE 或复杂生命周期场景

obj.say = function() {
  const that = this;
  setTimeout(function() {
    console.log(that.name); // ✅ 正确输出 'Tom'
  }, 100);
};

用箭头函数替代嵌套普通函数

箭头函数没有自己的 this，自动继承外层函数作用域的 this，写起来简洁，语义清晰：

• 只要外层是对象方法（且 this 指向正确），箭头函数就能“跟着走”
• 不能用于构造函数或需要动态 this 的场景
• 注意：对象字面量中直接写 fn: () => {...} 不行——此时外层没有 this 绑定，会继承全局上下文

obj.say = function() {
  setTimeout(() => {
    console.log(this.name); // ✅ this 仍是 obj
  }, 100);
};

用 bind 显式绑定 this

对已存在的普通函数，用 .bind(this) 创建一个新函数，确保执行时 this 固定：

• 适合复用已有函数，或需提前配置好上下文
• 每次 bind 都返回新函数，避免在 render 或循环里反复调用
• 常见于事件监听、定时器、数组方法回调等场景

obj.say = function() {
  function inner() { console.log(this.name); }
  setTimeout(inner.bind(this), 100); // ✅ this 绑定到 obj
};