类方法中this指向问题源于调用时上下文丢失，需通过箭头函数、constructor中bind或调用时临时bind（如onClick={() => this.handleClick()}）解决，避免解构赋值等导致this变为undefined。
类方法中的 this 指向问题，本质是函数调用时上下文丢失导致的。ES6 类方法默认不自动绑定 this，所以需要主动处理，否则在事件回调、定时器、解构调用等场景下会变成 undefined（严格模式）或指向全局对象。
使用箭头函数定义方法
箭头函数没有自己的 this，它会继承外层作用域的 this（即类实例）。适合用于需要访问实例属性/方法的回调场景。
注意：只能用于实例方法，不能用于静态方法或构造函数中；且无法被 call/apply/bind 改变 this。
- 写法示例：
handleClick = () => { console.log(this.name); } - 适用于 React 类组件的事件处理、
setTimeout回调、数组方法如map中的内联函数 - 缺点：每个实例都会创建独立的函数副本，内存开销略高（一般可忽略）
在 constructor 中手动 bind
在构造函数里对方法显式绑定 this，确保后续调用时上下文稳定。
立即学习“Java免费学习笔记（深入）”；
- 写法示例：
this.handleClick = this.handleClick.bind(this); - 适合需要复用同一函数引用的场景（比如多次传给子组件或事件监听器）
- 注意：必须在
super()之后、其他逻辑之前执行，否则this不可用
调用时临时绑定（推荐用于一次性场景）
在传入回调的位置现场绑定，灵活且避免提前绑定开销。
- 写法示例：
<button onClick={this.handleClick.bind(this)}>或setTimeout(this.handleClick.bind(this), 100) - 也可用箭头函数包裹：
onClick={() => this.handleClick()}（更常用，语义清晰） - 缺点：每次渲染都新建函数，可能触发子组件不必要的重渲染（React 中需留意）
避免 this 丢失的常见陷阱
有些写法看似正常，实则已丢失 this：
- 解构赋值：
const { handleClick } = this; handleClick(); // this === undefined - 作为参数传递：
someFunc(this.handleClick); // 调用时 this 不再指向实例 - 定时器直接传方法：
setTimeout(this.handleClick, 100); // 同样丢失 this
