使用类方法作为回调时，如何存储监听器引用？

这个坑我太熟悉了！用.bind()确实能解决回调里this指向组件实例的问题，但销毁组件的时候就麻烦了——每次调用.bind()都会返回一个全新的函数引用，你销毁时用原方法去removeEventListener，根本找不到对应的回调，自然删不掉。

先还原一下你提到的简化类场景：

class MyComponent {
  constructor(element) {
    this.element = element;
    // 用bind绑定上下文，确保handleClick里的this是组件实例
    this.element.addEventListener('click', this.handleClick.bind(this));
  }

  handleClick() {
    console.log('点击触发，this指向组件:', this);
  }

  destroy() {
    // 这里完全没用！因为bind又生成了新函数，和添加时的不是同一个
    this.element.removeEventListener('click', this.handleClick.bind(this));
  }
}

下面给你三种靠谱的解决方案，按推荐程度排序：

方案一：提前保存绑定后的函数引用 #

在constructor里把绑定好的函数存为实例属性，后续添加和移除都用这个固定的引用：

class MyComponent {
  constructor(element) {
    this.element = element;
    // 提前绑定并保存，确保引用唯一
    this.boundHandleClick = this.handleClick.bind(this);
    this.element.addEventListener('click', this.boundHandleClick);
  }

  handleClick() {
    console.log('点击触发，this指向组件:', this);
  }

  destroy() {
    // 用保存好的引用移除，完美匹配添加时的回调
    this.element.removeEventListener('click', this.boundHandleClick);
  }
}

这个方案兼容性最好，不管是旧版还是新版JS环境都能跑。

方案二：用箭头函数定义类方法（类字段语法） #

ES6的类字段语法支持直接用箭头函数定义方法，箭头函数会自动捕获当前实例的this，不用手动bind，而且方法引用是固定的：

class MyComponent {
  constructor(element) {
    this.element = element;
    // 直接用方法引用，不用bind
    this.element.addEventListener('click', this.handleClick);
  }

  // 箭头函数自动绑定this到组件实例
  handleClick = () => {
    console.log('点击触发，this指向组件:', this);
  }

  destroy() {
    // 直接用原方法引用移除即可
    this.element.removeEventListener('click', this.handleClick);
  }
}

这个写法最简洁，但要注意：如果你的项目还需要兼容不支持类字段的旧环境，可能需要用Babel之类的工具转译。

方案三：箭头函数包裹回调并保存引用 #

如果不想修改方法定义，可以在constructor里用箭头函数包裹原方法，同时保存这个包裹后的函数引用：

class MyComponent {
  constructor(element) {
    this.element = element;
    // 用箭头函数包裹，自动绑定this，同时保存引用
    this.clickHandler = () => this.handleClick();
    this.element.addEventListener('click', this.clickHandler);
  }

  handleClick() {
    console.log('点击触发，this指向组件:', this);
  }

  destroy() {
    this.element.removeEventListener('click', this.clickHandler);
  }
}

这个方案和方案一类似，但多了一层函数调用，性能上略逊于前两种，适合特殊场景下使用。

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