打字稿在回调中正确引用 this答案

【问题标题】：Typescript reference right this in callback打字稿在回调中正确引用 this
【发布时间】：2016-12-16 13:08:04
【问题描述】：

当我尝试使用 Class 1 中的 sendUserMessage() 时，我收到一个错误，即 content 未定义。我知道这与this 有关，但我找不到适合我情况的答案。

第 1 类：

    @ViewChild(Content) content: Content;

    sendUserMessage(message) {
        this.class2object.sendMessageToBackend(message,this.createMessage);

    }


    createMessage(jsonMessage) {
        this.content.scrollToBottom(300);
    }

第 2 类：

 sendMessageToBackend(ChatMessage: string, handler: Function) {
    //build requests
    var response: string;
    var time = new Date().getTime();
    var json = JSON.stringify({ message: ChatMessage, sessionID: "", timestamp: time });
    var headers = new Headers();
    headers.append("Content-Type", 'application/json');

    // send request
    this.http.post('http:somethhing.smth',
        json, {
            headers: headers
        }).subscribe(data => {
            response = JSON.parse(JSON.stringify(data.text()));
            handler(response);
        },
        () => console.log("error")
        );
}

注意：这里的方法被简化以便更好地理解。

我收到错误EXCEPTION: Cannot read property 'content' of undefined

我知道一种解决方案是将 2 类中的方法移至 1 类，但我真的会尽量避免这种情况。

【问题讨论】：

在createMessage中使用console.log(this.content)，检查是否为空。

标签： angular typescript this ionic2

【解决方案1】：

使用箭头函数：

this.class2object.sendMessageToBackend(message, jsonMessage => this.createMessage(jsonMessage));

我建议阅读这篇文章：Understanding "This" in JavaScript。

注意：闭包（我们的小箭头函数）has better performance 比 bind 函数。

【讨论】：

【解决方案2】：

使用绑定函数

 this.class2object.sendMessageToBackend(message, this.createMessage.bind(this));

希望对您有所帮助。

【讨论】：