typescript - Typescript 类中对 'this' 的 undefined reference

Question

我在使用 Typescript 时遇到问题，其中 this 关键字在调试时显示为未定义，因此没有调用我的一些从回调方法调用的私有(private)类方法.我的文本编辑器似乎认为我的引用资料很好并且给了我智能，所以我认为代码没问题。下面是一个简短的例子。当调用 _handleCreationResponse 回调方法时，cacheUser 和 _processSuccessfulRegistration 不会被命中。

export class User extends Observable {
    public email: string;
    public password: string;
    public username: string

    constructor() {
        super()
        this.email = '';
        this.password = '';
        this.username = '';
    }

    public register() {
        let user = {
            // build out object
        }
        userService.createAccount(user)
            .catch(/* handle error */)
            .then(this._handleCreationResponse)
    }

    private _handleCreationResponse(response) {
        let status = response.status;
        let userData = response.result;

        switch (status) {
            case ApiStatus.Success:
                this._cacheUser(userData);
                this._processSuccessfulRegistration(userData);
                break;
            case ApiStatus.SomeError:
                // handle errors
                break;
            default:
                // do something else 
                break;
        }
    }

    private _cacheUser(user) {
        // handle user caching
    }

    private _processSuccessfulRegistration() {
        // call some other services and 
        // navigate to a new view
    }
}

Answer 1

当您将函数作为回调传递时，函数不会绑定(bind)到特定的 this，因此当它们被执行时 this 将引用其他内容。

为避免这种情况，您可以 bind the function :

userService.createAccount(user)
            .catch(/* handle error */)
            .then(this._handleCreationResponse.bind(this)

或者使用 arrow function确实为此保存了正确的上下文:

userService.createAccount(user)
            .catch(/* handle error */)
            .then(response => this._handleCreationResponse(response))

---

编辑

还有另一种选择是将此方法创建为箭头函数:

private _handleCreationResponse = (response) => {
    let status = response.status;
    let userData = response.result;

    switch (status) {
        case ApiStatus.Success:
            this._cacheUser(userData);
            this._processSuccessfulRegistration(userData);
            break;
        case ApiStatus.SomeError:
            // handle errors
            break;
        default:
            // do something else 
            break;
    }
}

然后您可以像以前一样传递它，this 的上下文将被保留。
如果您使用此选项，请注意它与您之前使用的有点不同，因为 _handleCreationResponse 不再是一个方法，而是实例的一个函数属性(也就是说，它不再是原型(prototype))。

这是一个显示差异的简短示例:

class MyClass {
    method1() {
        console.log("method 1");
    }

    method2 = () => {
        console.log("method 2");
    }
}

编译为:

var MyClass = (function () {
    function MyClass() {
        this.method2 = function () {
            console.log("method 2");
        };
    }
    MyClass.prototype.method1 = function () {
        console.log("method 1");
    };
    return MyClass;
}());

你不能重写扩展类中的箭头函数方法，但因为你的方法是私有(private)的，所以这应该不是问题..