如何理解闭包中 this 指向与普通函数执行时的差异-js教程-PHP中文网

闭包不捕获this，其this由调用方式决定；解决方法包括缓存this、bind绑定、使用箭头函数或传参替代。

如何理解闭包中 this 指向与普通函数执行时的差异

闭包里 this 不是“继承”外层函数的 this，它根本不受外层影响——闭包只捕获变量，不捕获执行上下文。

为什么闭包内的 `this` 通常不是你期待的那个对象

普通函数调用时 this 由**调用方式**决定（如 obj.fn() 中 this 是 obj），而闭包只是函数值，它本身不绑定 this。一旦被单独调用（比如作为回调传给 setTimeout 或事件监听器），this 就退化为全局对象（非严格模式）或 undefined（严格模式）。

function 声明的闭包不会自动绑定外层 this，哪怕它定义在某个方法内部
箭头函数是例外：它没有自己的 this，而是沿作用域链向上找，所以常被误以为“闭包保留了 this”，其实是箭头函数的语义特性，不是闭包的功劳
常见错误现象：Uncaught TypeError: Cannot read property 'xxx' of undefined，尤其在 DOM 事件或定时器回调中

如何让闭包拿到正确的 `this`

核心思路是：把需要的 this 显式保存为变量，再在闭包中引用它。

用 const self = this 或 const that = this 在外层函数开头缓存（兼容所有环境）
用 bind(this) 绑定闭包函数（但注意每次调用都新建函数，有性能开销）
改用箭头函数定义闭包（仅限不需要动态 this 的场景；且不能用作构造函数或使用 arguments）
避免依赖 this：直接把所需属性/方法作为参数传入闭包，更清晰、更易测试

示例：

function Counter() {
  this.count = 0;
  // ❌ 错误：setTimeout 回调中 this 指向 window 或 undefined
  setTimeout(function() { console.log(this.count); }, 100);

  // ✅ 正确：缓存 this
  const self = this;
  setTimeout(function() { console.log(self.count); }, 100);

  // ✅ 正确：箭头函数（this 指向 Counter 实例）
  setTimeout(() => console.log(this.count), 100);
}