自定义hsSelect类多实例仅最后一个click事件监听器生效问题

你遇到的问题核心是事件绑定过程中this指向错误，导致只有最后一个实例的回调能正确关联到实例上下文，本质是所有实例的回调都在操作错误的上下文。

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

当你在构造函数中直接把this.open作为事件回调传给addEventListener时，回调函数的this在触发时会指向触发事件的DOM元素，而非hsSelect实例。如果open方法依赖实例的属性（比如实例的DOM节点、状态变量），就会出现逻辑混乱，表现为只有最后一个实例的事件能正常触发。

三种修复方案 #

方案1：在构造函数中用bind绑定this #

显式将open方法的this绑定到当前实例，确保回调触发时this指向实例：

class hsSelect {
  constructor(id) {
    this.el = document.getElementById(id);
    // 绑定this到当前实例，覆盖原open方法的引用
    this.open = this.open.bind(this);
    this.el.addEventListener('click', this.open);
  }

  open() {
    // 这里的this指向hsSelect实例，可以正常访问实例属性
    console.log('打开选择器', this.el.id);
  }
}

方案2：用箭头函数作为事件回调 #

箭头函数的this继承自定义时的作用域（也就是构造函数中的this），天然指向实例：

class hsSelect {
  constructor(id) {
    this.el = document.getElementById(id);
    // 箭头函数回调，this自动指向当前实例
    this.el.addEventListener('click', () => this.open());
  }

  open() {
    console.log('打开选择器', this.el.id);
  }
}

方案3：将open定义为箭头函数类属性（ES6+） #

直接把方法定义为类属性箭头函数，这样this始终指向实例，无需额外绑定：

class hsSelect {
  constructor(id) {
    this.el = document.getElementById(id);
    this.el.addEventListener('click', this.open);
  }

  // 箭头函数类属性，this永久绑定实例
  open = () => {
    console.log('打开选择器', this.el.id);
  }
}

额外注意事项 #

如果后续需要移除事件监听器，要确保使用同一个回调函数引用：

• 用方案1时，直接使用实例上的this.open移除即可
• 用方案2时，需要把箭头函数保存为实例属性，方便后续移除：

class hsSelect {
  constructor(id) {
    this.el = document.getElementById(id);
    // 保存回调引用
    this._clickHandler = () => this.open();
    this.el.addEventListener('click', this._clickHandler);
  }

  // 销毁方法：移除监听器
  destroy() {
    this.el.removeEventListener('click', this._clickHandler);
  }

  open() {
    console.log('打开选择器', this.el.id);
  }
}

内容的提问来源于stack exchange，提问作者Dr.Random