在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] 
    });