如何在传递函数时于编译阶段强制规范this的正确使用？

当把类方法传递给其他类作为回调时，很容易出现this上下文混乱的情况，比如以下示例：

class Counter {
    public count: number
    private callMyCallback: CallMyCallback
    constructor() {
        this.count = 0

        // 正常工作
        this.callMyCallback = new CallMyCallback(() => this.countFunctionCalls())
        // 运行时报错：Cannot read properties of undefined (reading 'count')
        this.callMyCallback = new CallMyCallback(this.countFunctionCalls)
    }
    private countFunctionCalls() {
        console.log("Callback called")
        this.count = this.count + 1;
    }
}

class CallMyCallback {
    constructor(callback: ()=> void) {
        callback();
    }
}

const counter = new Counter()
console.log(counter.count)

上述代码中，两种传递回调的方式在编译时都没有错误或警告，但第二种方式会在运行时触发this未定义的错误。以下是几种能在编译期强制规范this正确使用的方案：

1. 启用TypeScript的noImplicitThis配置 #

在tsconfig.json中开启noImplicitThis选项，当this的类型隐式为any时，TypeScript会抛出编译错误。

修改tsconfig.json：

{
  "compilerOptions": {
    "noImplicitThis": true,
    // 其他配置...
  }
}

开启后，示例中countFunctionCalls里的this会被检测出类型问题，因为当方法被单独传递时，this的指向丢失，TypeScript会提示this可能为undefined。

2. 显式指定回调的this类型 #

给回调函数的类型定义显式指定this的上下文类型，让TypeScript在编译期检查调用时的this是否符合要求。

修改CallMyCallback类的回调类型：

class CallMyCallback {
    // 显式指定回调的this必须是Counter类型
    constructor(callback: (this: Counter) => void) {
        callback.call(new Counter()); // 若需绑定原实例，需调整调用方式
    }
}

这样当传递this.countFunctionCalls时，TypeScript会直接报错，因为调用回调时的this和方法期望的this类型不匹配。

3. 使用箭头函数定义类方法 #

将类方法直接定义为箭头函数，这样this会始终绑定到类实例，避免传递时丢失上下文：

class Counter {
    public count: number
    private callMyCallback: CallMyCallback
    constructor() {
        this.count = 0
        // 此时直接传递方法也不会有问题
        this.callMyCallback = new CallMyCallback(this.countFunctionCalls)
    }
    // 用箭头函数定义方法，this永久绑定到实例
    private countFunctionCalls = () => {
        console.log("Callback called")
        this.count = this.count + 1;
    }
}

这种方式的缺点是每个类实例都会创建一个新的函数副本，会增加内存开销，适合小型类或调用频繁的方法。

4. 使用bind绑定this #

在传递方法时，通过bind显式将this绑定到类实例：

constructor() {
    this.count = 0
    this.callMyCallback = new CallMyCallback(this.countFunctionCalls.bind(this))
}

这样传递的回调函数会始终以当前类实例作为this的上下文，编译期不会报错，运行时也能正常工作。

5. 使用ESLint规则辅助检测 #

配合ESLint的@typescript-eslint/unbound-method规则，当传递未绑定的类方法作为回调时，ESLint会抛出警告或错误。

在ESLint配置中添加：

{
  "rules": {
    "@typescript-eslint/unbound-method": "error"
  }
}

这个规则会直接检测到this.countFunctionCalls这种未绑定的方法传递，在编码阶段就给出提示。

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