箭头函数在class中不绑定自身this，而是继承外层作用域（即实例）的this，适用于事件回调等需保持this一致的场景；必须用赋值语法定义，不可用于继承调用。
在 class 内部，方法默认不绑定 this，一旦被单独提取（如传给事件监听器、定时器或回调），this 就会丢失，指向 undefined（严格模式）或全局对象。正确绑定的关键是确保方法调用时 this 指向当前实例。
使用箭头函数定义方法（推荐）
箭头函数不绑定自己的 this，而是继承外层作用域的 this —— 也就是 class 实例。适合定义不需要被重写、且只在实例内使用的回调类方法。
class Button {
constructor(label) {
this.label = label;
}
handleClick = () => {
console.log(`Clicked: ${this.label}`); // this 始终指向实例
};
}
const btn = new Button('Submit');
document.getElementById('myBtn').addEventListener('click', btn.handleClick); // ✅ 安全
- 必须用赋值语法（
=），不是方法简写 - 每个实例都会创建独立的函数，有轻微内存开销（通常可忽略）
- 不能被子类用
super.handleClick()调用（因它不是原型方法）
在构造函数中显式绑定（兼容老环境）
在 constructor 中用 bind(this) 固定方法的 this，适用于需保留在原型上、又要求绑定的场景。
class Form {
constructor() {
this.data = {};
this.handleSubmit = this.handleSubmit.bind(this); // ✅ 绑定到实例
}
handleSubmit(event) {
event.preventDefault();
console.log('Form submitted:', this.data);
}
}
- 绑定只做一次，在实例初始化时完成
- 方法仍存在于原型上，利于继承和复用
- 比箭头函数更节省内存（共享同一函数引用）
调用时临时绑定（按需使用）
在传递方法的现场用 .bind(this)、arrow function 或 .call/.apply，适合一次性或条件性绑定。
立即学习“Java免费学习笔记（深入）”；
class Timer {
start() {
// 方式1：bind
setTimeout(this.tick.bind(this), 1000);
// 方式2：箭头函数（更简洁）
setTimeout(() => this.tick(), 1000);
// 方式3：call/apply（适合带参数）
setTimeout(() => this.tickWithArgs('hello'), 1000);
}
tick() { console.log('Tick!', this.id); }
tickWithArgs(msg) { console.log(msg, this.id); }
}
- 箭头函数方式最常用，语义清晰、无额外绑定成本
- 避免在 render 或高频回调中反复创建新函数（如 React 中不要在 JSX 里写
() => this.handleClick()）
注意 class 字段提案与 Babel 支持
类字段（如 handleClick = () => {}）是 TC39 Stage 4 提案，现代浏览器和主流构建工具（Babel + @babel/preset-env）默认支持。若需支持 IE 或极老环境，应选用构造函数绑定方案。
- 确认项目构建配置已启用类字段转换
- TypeScript 用户无需额外配置（
target≥ ES2015 即可） - ESLint 可启用
class-methods-use-this辅助识别未使用this的方法
