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

Question

我正在使用 socket.io 和 typescript 构建一个应用程序。与往常一样，我创建了服务器和客户端，但现在我的服务器代码遇到了奇怪的问题。我的服务器正在监听“连接”事件，回调创建新的类实例并调用他的 onConnect 方法。在这个函数中，它调用另一个方法 - 'bindHandlers'。在这个函数中，socket 监听他的事件。

这是我的问题：如果我将回调作为匿名函数传递给“draw”事件，它会按预期工作，但如果我使用我的类方法，它会将事件发送回客户端而不是广播它。我想让我的代码更加模块化，而这个问题暂时阻碍了我。

主文件：

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 中方法/函数的上下文取决于方法的调用方式。