Socket.io客户端回调中handleResponse函数未定义的原因及解决方法

当你将this._socketOnMessage作为回调传递给socket.on时，函数的**this指向会丢失**——回调执行时，this不再指向你的类实例，而是指向触发事件的Socket对象（严格模式下为undefined），因此找不到属于类实例的handleResponse方法。

以下是三种可行的修复方式：

方案1：用箭头函数定义回调 #

箭头函数会自动继承当前上下文的this，可以直接在绑定回调时使用，也可以把_socketOnMessage定义为箭头函数类字段：

// 方式A：绑定回调时直接用箭头函数
this.socket.on("message", (data) => {
  this.handleResponse();
});

// 方式B：将_socketOnMessage定义为箭头函数类字段
class YourSocketClient {
  _socketOnMessage = (data) => {
    this.handleResponse();
  };

  handleResponse() {
    console.log("handling response");
  }
}

方案2：在构造函数中手动绑定this #

在类的构造函数里，用bind把_socketOnMessage的this固定为类实例：

class YourSocketClient {
  constructor() {
    // 初始化socket逻辑
    this._socketOnMessage = this._socketOnMessage.bind(this);
    this.socket.on("message", this._socketOnMessage);
  }

  _socketOnMessage(data) {
    this.handleResponse();
  }

  handleResponse() {
    console.log("handling response");
  }
}

方案3：用箭头函数包裹原方法 #

如果不想修改原方法的定义，可以在绑定回调时用箭头函数包裹，保留原写法：

this.socket.on("message", (data) => this._socketOnMessage(data));

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