箭头函数定义类方法本质是将方法作为实例属性声明，自动绑定this；因其无自有this，继承外层（构造前）的实例this，故无论何处调用this均指向实例。

在类初始化阶段用箭头函数定义方法，本质是把方法作为类实例的属性（而非原型方法）来声明，从而让函数自动绑定当前实例的 this，避开传统方法调用时的上下文丢失问题。

为什么箭头函数能自动绑定 this

箭头函数没有自己的 this，它会沿作用域链向上查找并继承外层执行上下文的 this。在类的字段初始化阶段（即构造函数运行前），this 指向即将创建的实例，因此箭头函数捕获的正是该实例。

写法：直接在类体中用字段语法声明

无需写在构造函数里，更简洁且语义清晰：

快写红薯通AI

快写红薯通AI是一款专为小红书笔记创作和改写设计的 AI 文案工具。

下载

class Counter {
  count = 0;

  // ✅ 箭头函数作为类字段，自动绑定 this
  increment = () => {
    this.count++;
  };

  // ❌ 普通方法，this 在回调中会丢失
  decrement() {
    this.count--;
  }
}

这样定义后，无论怎么传递 counter.increment（比如传给 setTimeout、事件监听器或子组件），this 始终指向 counter 实例。

注意点与常见陷阱

• 每个实例都会创建一份函数副本，内存开销略高于原型方法（对多数场景可忽略）
• 无法被子类用 super.method() 调用，因为它不在原型链上
• 不能被重写（override）为同名原型方法，优先级高于原型上的同名方法
• TypeScript 中需开启 useDefineForClassFields: true（v4.7+ 默认启用），否则可能触发旧版赋值行为

适用场景推荐

特别适合需要被外部环境“借用”调用的方法：

• React 类组件中的事件处理函数（如 onClick={this.handleClick}）
• 定时器回调：setTimeout(this.timerTick, 1000)
• Promise 回调：fetch(...).then(this.onSuccess)
• 第三方库要求传入具名回调（如 mapbox.on('click', this.handleMapClick)）