严格模式下this丢失会直接报错,利于快速定位问题;常见场景包括函数独立调用、回调传入原生api、事件监听器未绑定及箭头函数外层this已丢失;可通过console.log诊断和调用栈排查,修复方式有构造时绑定、调用时bind/call/apply、闭包包装等。

在严格模式下,丢失 this 绑定会直接报错(Cannot read property 'xxx' of undefined 或 TypeError: Cannot read property 'xxx' of undefined),而不是静默变成全局对象,这其实反而有利于快速定位问题。关键是要理解哪些场景会丢失 this,并用对应方式加固绑定。
常见丢失 this 的场景与识别方法
以下代码在严格模式下执行时,this 会变为 undefined,进而触发错误:
-
函数独立调用:比如把对象方法赋值给变量后调用:
const fn = obj.method; fn(); -
回调函数传入原生 API:如
setTimeout(obj.method, 100)、array.forEach(obj.method) -
事件监听器中未显式绑定:如
btn.addEventListener('click', obj.handleClick),点击时this指向btn而非obj -
箭头函数内部引用外部
this,但外层已丢失:箭头函数不绑定this,它只是沿作用域链向上找 —— 如果外层函数的this已是undefined,那它拿到的也是undefined
排查技巧:快速确认是否为 this 丢失
在疑似出错的方法开头加一行诊断输出:
console.log('this in method:', this);
如果打印出 undefined(严格模式下)或意外的对象(如 window 或 globalThis,非严格模式),基本可断定是 this 绑定问题。再结合调用栈(Chrome DevTools 的 “Call Stack” 面板),看该方法是被谁以什么方式调用的。
修复方案:按场景选择合适方式
-
构造时绑定(推荐用于类方法):在 constructor 中用
this.method = this.method.bind(this);或使用类字段语法(需 Babel/TS 支持):method = () => { ... } -
调用时绑定:用
.bind()、.call()、.apply()显式指定this,例如setTimeout(obj.method.bind(obj), 100) -
包装成闭包(适用于简单回调):写成
() => obj.method(),利用箭头函数捕获当前this(前提是外层this正确) -
使用 bind 在事件监听中:如
btn.addEventListener('click', obj.handleClick.bind(obj));更优解是用实例方法绑定或委托处理逻辑
预防性措施:让问题暴露得更早
除了严格模式本身,还可主动强化检查:
- 在类方法开头加守卫:
if (this === undefined) throw new Error('this binding lost in strict mode'); - 使用 ESLint 规则
no-invalid-this和consistent-this辅助静态检测 - 单元测试中模拟各种调用方式(尤其是解构调用、回调传入),验证
this是否符合预期
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











