TypeScript箭头函数中this未定义问题求助

我有一个基于Web Audio API的TypeScript类，在类方法中编写了如下代码：

getTracks.filter(
    (track) => track.kind === 'audio'
).forEach(
    (track, index) => {
        if (!this._recordingData.hasOwnProperty('track information')) {
            // ... 业务逻辑
        }
    }
)

运行时发现if语句中的this未定义。我尝试了多种方法，结果都一样：

1. 使用普通函数并手动绑定this：

getTracks.filter(
    (track) => track.kind === 'audio'
).forEach(
    function(track, index) {
        // ... 业务逻辑
    }.bind(this)
)

2. 给forEach传递this作为第二个参数：

getTracks.filter(
    (track) => track.kind === 'audio'
).forEach(
    (track, index) => {
        // ... 业务逻辑
    }, this
)

3. 拆分链式调用后重复上述尝试：

let foo = getTracks.filter(
    (track) => track.kind === 'audio'
)

foo.forEach(
    (track, index) => {
        // ... 业务逻辑
    }
)

// 或者
foo.forEach(
    function(track, index) {
        // ... 业务逻辑
    }.bind(this)
)

我的tsconfig.json配置如下：

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es6",
    "lib": [
        "es2018",
        "dom"
    ]
  },
  "files": [
    "my_app/static/js/AudioControls.ts"
  ],
}

目前我用类方法内的局部对象临时替代解决，但这不是根本方案：

let recordingData = {}

getTracks.filter(
    (track) => track.kind === 'audio'
).forEach(
    (track, index) => {
        if (!recordingData.hasOwnProperty('track information')) {
            // ... 业务逻辑
        }
    }
)

解决思路 #

问题的核心大概率是类方法本身的this绑定丢失，而非forEach回调的问题：

如果这个类方法是作为回调（比如DOM事件监听、异步操作回调）被调用的，方法本身的this会指向调用它的上下文（比如DOM元素），而非类实例。此时即使在forEach里用箭头函数或绑定，外层方法的this已经不对了，自然内层也无法获取正确的类实例。

两种修复方案： #

1. 在构造函数中绑定类方法：

class AudioControls {
    private _recordingData: Record<string, any> = {};

    constructor() {
        // 将类方法的this绑定到当前实例
        this.yourMethod = this.yourMethod.bind(this);
    }

    yourMethod() {
        // 这里的this已经正确指向类实例
        getTracks.filter(track => track.kind === 'audio')
            .forEach((track, index) => {
                if (!this._recordingData.hasOwnProperty('track information')) {
                    // ... 业务逻辑
                }
            });
    }
}

2. 用箭头函数定义类方法：
   箭头函数会自动捕获当前上下文的this，无需手动绑定：

class AudioControls {
    private _recordingData: Record<string, any> = {};

    // 用箭头函数定义方法，this始终指向类实例
    yourMethod = () => {
        getTracks.filter(track => track.kind === 'audio')
            .forEach((track, index) => {
                if (!this._recordingData.hasOwnProperty('track information')) {
                    // ... 业务逻辑
                }
            });
    }
}

另外可以额外检查：确认getTracks的调用是否存在上下文干扰，但这种情况极少，优先排查类方法的this绑定问题即可。

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