从类方法调用发射时，不同的行为

Question

我正在用socket.io和打字稿构建一个应用程序。与往常一样，我创建了服务器和客户端，但是现在我在服务器代码上面临奇怪的问题。我的服务器正在侦听"连接"事件，并且由于回调创建了新的类实例并调用了他的连接方法。在此功能中，它调用了另一种方法 - " bindhandlers"。在此功能中，插座听他的活动。

这是我的问题：如果我将回调作为匿名函数将"绘制"事件作为预期工作，但是如果我使用我的类方法，它将将事件发送回客户端而不是广播。我想让我的代码更模块化，这个问题暂时阻止了我。

主文件：

io.on("connection", SocketService.createInstance(db).onConnect);

简化的套接字文件：

export class SocketService {
  private socket: Socket | null = null;
  constructor(private db: DB) {}
  static createInstance = (db: DB) => {
    return new SocketService(db);
  };
 onConnect = (socket: Socket) => {
   this.socket = socket;
   const username = socket.handshake.query.user;
   console.log(`${username} connected ${socket.id}`);
   this.bindHandlers(socket);
 };
  private bindHandlers = (socket: Socket) => {
   if (!this.socket) return console.log("socket is undefined");

   socket.on("draw", this.onDraw);
   // if I swap with code below it works properly
   // socket.on("draw", data => {
   //   socket.broadcast.emit("draw", data);
   // });
  };
 private onDraw = (data: DrawingPoint) => {
   const username = this.socket!.handshake.query.user;
   const { group } = data;
   this.socket!.broadcast.emit("draw", data);
 };

Answer 1

它正在使用的原因：

socket.on("draw", data => {
  socket.broadcast.emit("draw", data);
});

是因为您使用的是箭头函数（this）将具有周围的上下文，但是在定义事件处理程序时，例如：socket.on("draw", this.onDraw);上下文将不再是SocketService的实例。稍微播放一点，然后调试它，以查看您用它来调用的情况下的上下文。

一种解决方案是明确设置上下文，例如： socket.on("draw", this.onDraw.bind(this));

请记住，JS中方法/函数的上下文取决于方法的调用。