TypeScript中如何将箭头函数作为变量存入数组并正确调用？

这个问题是JS/TS里典型的this绑定丢失问题——当你把类的普通方法直接存入数组，调用时它会脱离原类实例的上下文，this就不再指向类实例，自然找不到socket属性。下面给你几种靠谱的解决方案，重点覆盖你想要的箭头函数方案：

方案一：定义类方法时直接用箭头函数 #

这种方式最直接，箭头函数会在定义时捕获类实例的this，不管后续怎么调用，this都不会发生改变：

class YourSocketClass {
  // 假设你已经声明了socket属性
  public socket: WebSocket;

  // 用箭头函数定义处理方法
  public handleLogin = (data: any) => {
    this.socket.send(data);
    // 其他业务逻辑...
  };

  // 在类的其他方法里存入数组并调用
  public setupHandlers() {
    const tab = [this.handleLogin];
    // 调用时this依然指向类实例，socket可正常访问
    tab[0](yourLoginData);
  }
}

方案二：存入数组时用箭头函数包裹原方法 #

如果不想修改原方法的定义（比如要保留方法在类原型链上），可以在存入数组时用箭头函数包裹调用，以此保留类实例的this上下文：

class YourSocketClass {
  public socket: WebSocket;

  // 普通类方法
  public handleLogin(data: any) {
    this.socket.send(data);
    // 其他业务逻辑...
  }

  public setupHandlers() {
    const yourLoginData = /* 你的登录数据 */;
    // 用箭头函数包裹，内部调用时this指向类实例
    const tab = [(data) => this.handleLogin(data)];
    tab[0](yourLoginData);
  }
}

方案三：用bind绑定this后存入数组 #

除了箭头函数，也可以用Function.prototype.bind把类实例的this永久绑定到方法上，效果和箭头函数类似：

class YourSocketClass {
  public socket: WebSocket;

  public handleLogin(data: any) {
    this.socket.send(data);
    // 其他业务逻辑...
  }

  public setupHandlers() {
    const yourLoginData = /* 你的登录数据 */;
    // 绑定this到当前类实例后存入数组
    const tab = [this.handleLogin.bind(this)];
    tab[0](yourLoginData);
  }
}

简单总结下：箭头函数的核心优势是不会创建自己的this，而是继承定义时所在上下文的this，所以能完美解决你遇到的this指向丢失问题。

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