訪問mqtt回調范圍之外的類屬性

Question

我正在使用npm-mqtt從另一個mqtt代理獲取數據。

在收到的每條消息上，我想將數據添加到類/組件數組屬性。

但是我無法訪問該類或其屬性。 相反，范圍顯示我在mqtt客戶端類對象中。

這是一個代碼示例：

this.mydata: Array<any> = [];

private fetchWithMqtt(){
var client = mqtt.connect('ws://' + this.ip + ":" + Number(this.port) + "/mqtt");
        // set callback handlers
        client.on('close', this.onConnectionLost);
        client.on('message', this.onMessageArrived);
        client.on('connect', this.onConnect);
}

private onMessageArrived(topic, message) {
        let tempDataset = JSON.parse(message).dataset;
            this.mydata.push({ //this.mydata is undefined because this = mqtt-client
                x: tempDataset[0],
                y: tempDataset[1]
            });

如何在此范圍之外將數據推送到類屬性？

Answer 1

使用.bind(this) ，可以確保在調用事件時this不會改變。

您的代碼現在將如下所示：

this.mydata: Array<any> = [];

private fetchWithMqtt(){
    var client = mqtt.connect('ws://' + this.ip + ":" + Number(this.port) + "/mqtt");
    // set callback handlers
    client.on('close', this.onConnectionLost.bind(this));
    client.on('message', this.onMessageArrived.bind(this));
    client.on('connect', this.onConnect.bind(this));
}

private onMessageArrived(topic, message) {
    let tempDataset = JSON.parse(message).dataset;
    this.mydata.push({
        x: tempDataset[0],
        y: tempDataset[1]
    });

但是，如果您需要在事件處理程序中訪問client ，該怎么辦？ 好了，您仍然可以使用bind，但是將mydata放在事件處理程序的前面，並將其作為參數。

您的代碼現在變為：

this.mydata: Array<any> = [];

private fetchWithMqtt(){
    var client = mqtt.connect('ws://' + this.ip + ":" + Number(this.port) + "/mqtt");
    // set callback handlers
    client.on('close', this.onConnectionLost.bind(client, this.mydata));
    client.on('message', this.onMessageArrived.bind(client, this.mydata));
    client.on('connect', this.onConnect.bind(client, this.mydata));
}

private onMessageArrived(mydata, topic, message) {
    let tempDataset = JSON.parse(message).dataset;
    mydata.push({ // this == client
        x: tempDataset[0],
        y: tempDataset[1]
    });