隐式绑定丢失时，this指向window（非严格模式）或undefined（严格模式），根本原因是函数脱离“对象.方法”调用形式而触发默认绑定规则；常见场景包括赋值、传参、解构等切断上下文的操作；修复方式有箭头函数包装、bind预绑定、类字段箭头函数及手动保存this引用。
隐式绑定丢失时，this 指向 window（非严格模式）或 undefined（严格模式），根本原因是函数脱离了“对象.方法”的调用形式，退回到默认绑定规则。
为什么丢失后会指向 window？
JavaScript 的 this 绑定有四条优先级规则，隐式绑定只在满足“点号调用”时生效。一旦函数被单独取出、传参或解构，就不再属于任何对象上下文，引擎只能按默认绑定处理：
- 非严格模式下，默认绑定把 this 指向全局对象（浏览器中就是 window）
- 严格模式下，默认绑定返回 undefined，避免意外污染全局
- 比如
const fn = obj.method; fn();—— 这里fn已是普通函数调用，和obj再无关系
常见导致丢失的场景
这些操作看似只是“取个引用”，实则切断了调用链与对象的关联：
-
赋值给变量：
const handleClick = user.sayHi; handleClick(); -
作为回调传入异步或事件系统：
setTimeout(obj.log, 100)或btn.addEventListener('click', obj.handleClick) -
数组方法中直接传入：
[1,2,3].forEach(obj.process) -
对象解构提取：
const { save } = form; save();
修复 this 指向的实用方式
核心思路是：不让函数“裸奔”，而是确保它执行时仍能明确知道“我是谁调用的”：
立即学习“Java免费学习笔记（深入）”；
-
箭头函数包装：在注册回调处即时封装，语义清晰
btn.addEventListener('click', () => obj.handleClick()); -
bind 预绑定：适合需复用同一绑定函数的场景
const boundFn = obj.method.bind(obj); setTimeout(boundFn, 100); -
类字段 + 箭头函数（class 中推荐）：让方法成为实例属性，天然绑定
handleClick = () => { console.log(this.name); }; -
手动保存 this 引用：传统但有效，尤其兼容老环境
const self = this; setTimeout(function() { console.log(self.name); }, 100);
怎么快速判断是否丢失？
最直接的办法是在方法内部加一行诊断输出：
-
console.log('this:', this);—— 期望是对象却打印出window或undefined，说明已丢失 -
this.xxx报错Cannot read property 'xxx' of undefined，是典型征兆 - 事件处理器中
this指向 DOM 元素而非类实例，说明调用权已被浏览器接管
