关于removeEventListener里使用里bind不生效解决办法

现在写JS代码都流行用class了，自己在写一些东西都时候也会用。

但是在一个对象里如果绑定了某些事件需要在销毁时移除绑定，在使用bind的情况下不能正常移除。

这里单独记录一下，如下代码:

class User {

  constructor (name) {
    this.name = name;
    window.addEventListener("click", this.printName.bind(this));
  }

  name = "";

  printName () {
    console.log(this.name);
  }

  destroy () {
    window.removeEventListener("click", this.printName.bind(this));
  }

}

User类中printName方法需要访问自己到属性，如果在绑定事件时不将上下文指向自己，那么在printName中作用域会丢失，将会打印window.name;

但是在使用bind以后，destory方法中的移除事件并不会生效，众所周知如果事件需要解绑，那么函数不能使用匿名函数或直接function，因为每次返回的都是不同的函数，使用bind同理，返回的也是一个新的不同函数。

解决办法则是用一个属性去接收事件处理函数，则可以在多个地方使用:

class User {

  constructor (name) {
    this.name = name;
    window.addEventListener("click", this.eventClick);
  }

  name = "";

  // 这里保存事件函数
  eventClick = this.printName.bind(this);

  printName () {
    console.log(this.name);
  }

  destroy () {
    window.removeEventListener("click", this.eventClick);
  }

}

本文转自：https://blog.csdn.net/qq_40936253/article/details/84972259