箭头函数不绑定this，继承外层作用域的this值；在类中推荐用类字段定义箭头函数方法，确保this始终指向实例；构造函数中赋值也可行，但不可定义在原型上。
箭头函数本身不绑定 this，它会继承外层作用域的 this 值。在类中使用箭头函数作为方法时，只要定义时外层的 this 是正确的（比如在构造函数或类字段中），就能自然捕获当前实例，避免 this 丢失。
在类字段中直接定义箭头函数
这是最常用且推荐的方式。类字段语法（public field）会在实例初始化时将箭头函数绑定到当前实例，this 始终指向该实例。
示例：
class Counter {
count = 0;
// ✅ 箭头函数作为类字段，this 指向实例
handleClick = () => {
console.log(this.count); // 正确访问实例属性
this.count++;
};
}
const btn = document.getElementById('btn');
const counter = new Counter();
btn.addEventListener('click', counter.handleClick); // 可安全传递，this 不丢失
在构造函数中显式赋值
如果需要兼容较老环境（不支持类字段），可在 constructor 中手动将箭头函数赋给实例属性。
- 确保赋值发生在
this已确定之后（即构造函数内） - 函数体内的
this会捕获构造时的实例 - 注意：不能在原型上定义，否则
this会指向调用上下文
示例：
class Counter {
constructor() {
this.count = 0;
// ✅ 在 constructor 中赋值，this 绑定到实例
this.handleClick = () => {
console.log(this.count);
this.count++;
};
}
}
避免在原型上定义箭头函数
箭头函数不能用作原型方法，因为类方法默认定义在原型上，而箭头函数无法通过 prototype 正确设置 this。
-
handleClick = () => { ... }是实例属性，不是原型方法 -
handleClick() { ... }是原型方法，普通函数，this依赖调用方式 - 写成
handleClick: () => { ... }在对象字面量中可行，但在 class 原型语法中无效
对比普通函数的 this 问题
普通方法（非箭头）在单独调用或事件回调中容易丢失 this：
-
obj.method()→this正常指向obj -
const fn = obj.method; fn();→this变成undefined（严格模式）或全局对象 -
addEventListener('click', obj.method)→ 同样丢失this
箭头函数绕过了这些场景，因为它根本不关心调用方式，只看定义位置的外层 this。
