是否存在ESLint规则可强制类中引用this时使用箭头函数？

JavaScript中this的绑定语义十分特殊，有时我们希望this由调用者绑定，但在类方法场景下，这基本不符合开发者的初衷——当类方法作为高阶函数传递时，往往会引发意外的错误。

我需要一条ESLint规则，在类方法引用了this却未定义为箭头函数时发出警告。

非期望行为示例： #

type CelebrateBirthday = () => number

class Person {
    name: string
    age: number

    constructor(name: string, age: number) {
      this.name = name
      this.age = age
    }

    // 普通类方法，传递后会丢失this绑定
    celebrateBirthday(): number {
      return ++this.age
    }

    // 箭头函数属性，this始终绑定到实例
    celebratBirthdayArrow = (): number => {
      return ++this.age
    }
}


function celebrateBirthdayAndPrintAge(birthdayCelebrationFn: CelebrateBirthday) {
  console.log("Happy birthday, you are " + birthdayCelebrationFn() + " years old")
}


const person = new Person("bob", 10)

// 正常运行
celebrateBirthdayAndPrintAge(person.celebratBirthdayArrow)
// 抛出错误："this is undefined"
celebrateBirthdayAndPrintAge(person.celebrateBirthday)

满足需求的ESLint方案 #

方案1：TypeScript环境下使用官方规则

如果你用TypeScript，可以用@typescript-eslint/method-signature-style规则强制所有类方法以箭头函数属性的形式定义：

在ESLint配置文件中添加：

{
  "rules": {
    "@typescript-eslint/method-signature-style": ["warn", "property"]
  }
}

该规则会将所有类方法转为箭头函数属性，确保this始终绑定到类实例。

方案2：针对引用this的方法精准限制

如果你只想强制**引用了this**的类方法使用箭头函数，可以借助第三方插件eslint-plugin-prefer-arrow-class-methods：

1. 安装插件：

npm install eslint-plugin-prefer-arrow-class-methods --save-dev

2. 在ESLint配置中启用规则：

{
  "plugins": ["prefer-arrow-class-methods"],
  "rules": {
    "prefer-arrow-class-methods/prefer-arrow-class-methods": "warn"
  }
}

这个插件会自动检测类方法中是否引用了this，如果是普通方法而非箭头函数属性，就会发出警告。

方案3：自定义ESLint规则（进阶）

如果上述插件无法满足需求，你可以编写自定义ESLint规则，核心逻辑是：

• 遍历类方法节点
• 检查方法内部是否包含this引用
• 如果是普通方法而非箭头函数属性，触发警告

内容的提问来源于stack exchange，提问作者Magnus