PubNub Angular2中addListener调用函数报错：this.plotBus不是函数

这个报错是典型的JavaScript this指向问题，我来帮你快速拆解并解决：

错误原因 #

当你用普通function定义message回调时，函数内部的this并不指向你的类实例，而是指向PubNub listener的上下文对象。这就导致它找不到你定义的plotBus方法，从而抛出类型错误。

三种可行解决方案 #

方案1：使用箭头函数（推荐）

箭头函数不会创建自己的this，它会继承外层上下文的this指向，也就是你的类实例：

this.pubnub.addListener({ 
  message: (msg) => { 
    console.log(msg); 
    this.plotBus(msg) 
  } 
})

方案2：提前保存外层this到变量

在回调外部把类实例的this保存到一个变量（比如self），然后在回调里使用这个变量：

const self = this; // 保存类实例的this
this.pubnub.addListener({ 
  message: function(msg) { 
    console.log(msg); 
    self.plotBus(msg) // 使用保存的self调用方法
  } 
})

方案3：用bind()绑定this

通过bind()方法把回调函数的this强制绑定到类实例：

this.pubnub.addListener({ 
  message: function(msg) { 
    console.log(msg); 
    this.plotBus(msg) 
  }.bind(this) // 绑定类实例的this到回调
})

额外验证点 #

确保你的plotBus是类的成员方法（比如在class内部用plotBus(bus) { ... }定义），而不是局部函数；同时确认pubnub实例已经正确初始化，再调用subscribe方法。

内容的提问来源于stack exchange，提问作者ChrisR