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

闭包里 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);
}
call/apply 能否修复闭包里的 this
不能。因为 call 和 apply 只影响**当次调用**的 this,而闭包的问题在于定义时没保存上下文,调用时又脱离了原始调用链。即使你在定义闭包后立刻 .call(obj),也只是临时覆盖,下一次调用仍会丢失。
-
call/apply对已经定义好的函数有效,但对“将来被别处调用”的闭包无效 - 如果闭包是作为返回值暴露出去的(比如工厂函数),调用方完全控制调用方式,此时必须靠提前绑定或缓存
- 真正起作用的是
bind—— 它返回一个永久绑定this的新函数,本质是固化了调用时的上下文
最易被忽略的一点:很多人盯着“闭包”想解决 this,其实问题根源不在闭包,而在 JavaScript 的 this 绑定机制本身——它和词法作用域无关,只和调用表达式有关。混淆这两者,是绝大多数 this 相关 bug 的起点。

















