在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？那麼你仍然可以使用綁定，但在事件處理程序中加入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] 
    });