无法在类的异步Promise中访问类变量test的问题求助

问题场景 #

在TypeScript的Test类中，getTest方法内的Promise回调函数无法访问类实例变量test，运行时抛出以下错误：

TypeError: Cannot read properties of undefined (reading 'test')

原代码如下：

export class Test {
    test: string;

    constructor() {
        this.test = "123";
    }

    async getTest() {
        return new Promise(async function(resolve, reject) {
            try {
                console.log(this.test);
            }
            catch(err) {
                console.log(err);
            }
        })
    }
}

解决方案 #

方法1：使用箭头函数（推荐） #

箭头函数不会绑定自身的this，会继承外层上下文（即getTest方法所属的类实例）的this，修改后代码如下：

export class Test {
    test: string;

    constructor() {
        this.test = "123";
    }

    async getTest() {
        return new Promise(async (resolve, reject) => {
            try {
                console.log(this.test); // 正常输出"123"
                resolve(this.test);
            } catch(err) {
                console.log(err);
                reject(err);
            }
        })
    }
}

方法2：提前保存this到变量 #

在Promise回调外将类实例的this赋值给一个变量（比如self），回调内通过该变量访问类成员：

export class Test {
    test: string;

    constructor() {
        this.test = "123";
    }

    async getTest() {
        const self = this;
        return new Promise(async function(resolve, reject) {
            try {
                console.log(self.test); // 正常输出"123"
                resolve(self.test);
            } catch(err) {
                console.log(err);
                reject(err);
            }
        })
    }
}

方法3：用bind绑定this #

通过bind方法将类实例的this绑定到Promise的回调函数上：

export class Test {
    test: string;

    constructor() {
        this.test = "123";
    }

    async getTest() {
        return new Promise(async function(resolve, reject) {
            try {
                console.log(this.test); // 正常输出"123"
                resolve(this.test);
            } catch(err) {
                console.log(err);
                reject(err);
            }
        }.bind(this))
    }
}

原因说明 #

普通函数作为Promise回调时，this的指向由函数的调用方式决定，在严格模式下会指向undefined；而箭头函数会捕获外层函数（getTest）的this，也就是类的实例对象，因此能正确访问到test变量。

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