TypeScript数组已定义仍报'Cannot read property 'push' of undefined'错误求助

这问题我之前踩过一模一样的坑！核心原因是socket.io的回调函数改变了this的指向，导致你在receive里访问的this.messageList根本不是类里定义的那个数组。

为什么会出现这个问题？ #

当你用普通function定义receive作为回调时，this会被绑定到socket的上下文对象，而不是你的类实例。这时候this.messageList自然就是undefined，调用push方法肯定会报错。

三种可行的解决方案： #

• 方案一：用箭头函数定义回调
  箭头函数不会绑定自己的this，而是继承外层作用域的this（也就是你的类实例），这样就能正确访问到messageList了：

public messageList: Array<string> = [];
receive = (msg) => { 
  if (msg.length > 0) { 
    this.messageList.push(msg); 
  } 
}

• 方案二：绑定事件时手动指定this
  如果坚持用普通函数，可以在注册socket事件的时候，用bind把this绑定到类实例：

// 假设你是这样注册事件的，加上bind(this)
socket.on('你的事件名', this.receive.bind(this));

• 方案三：在构造函数里提前绑定this
  在类的构造函数中，把receive方法的this绑定到类实例，这样后续不管怎么调用receive，this都指向正确的对象：

constructor() {
  this.receive = this.receive.bind(this);
}

public messageList: Array<string> = [];
receive(msg) { 
  if (msg.length > 0) { 
    this.messageList.push(msg); 
  } 
}

你之前尝试的数组定义方式是完全没问题的，问题就出在this的绑定上。可以在receive里加一句console.log(this)验证一下，就能看到原来的this指向的是socket相关对象，而不是你的类实例~

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