如何在事件处理器中访问DOM元素属性并调用JS构造函数方法？

这个问题在JS面向对象开发里太常见了——当你把构造函数里的方法绑成事件处理器时，this的指向会"跳槽"到触发事件的DOM元素上，导致你没法直接调用实例上的其他方法。下面给你几个实用的解决办法：

1. 提前用bind()绑定实例的this #

在构造函数里给DOM元素绑定事件的时候，用bind()把回调函数的this硬绑定到构造函数实例上。这样回调里的this就指向实例了，同时你可以通过事件对象event获取到触发事件的DOM元素。

示例代码：

class MyComponent {
  constructor(elementId) {
    this.domElement = document.getElementById(elementId);
    // 用bind把实例的this绑定到处理器上
    this.domElement.addEventListener('click', this.handleClick.bind(this));
    this.myInstanceMethod = () => {
      console.log('这是构造函数里的实例方法');
    };
  }

  handleClick(event) {
    // 这里的this指向构造函数实例
    this.myInstanceMethod();
    // 通过event.target获取触发事件的DOM元素，拿到它的id
    console.log('触发事件的元素ID:', event.target.id);
  }
}

// 用法
new MyComponent('my-button');

2. 使用箭头函数作为事件处理器 #

箭头函数本身没有自己的this，它会继承外层作用域的this（也就是构造函数实例的this）。同样，你还是通过event对象获取DOM元素。

示例代码：

class MyComponent {
  constructor(elementId) {
    this.domElement = document.getElementById(elementId);
    // 箭头函数继承构造函数的this
    this.domElement.addEventListener('click', (event) => this.handleClick(event));
    this.myInstanceMethod = () => {
      console.log('调用了实例方法');
    };
  }

  handleClick(event) {
    this.myInstanceMethod();
    console.log('元素ID:', event.target.id);
  }
}

3. 在构造函数中缓存this的引用（传统写法） #

如果你用的是ES5的构造函数（不是class），可以在构造函数里把this存成一个变量，比如self或者that，然后在回调里用这个变量访问实例方法，同时用this（或者event.target）访问DOM元素。

示例代码：

function MyComponent(elementId) {
  var self = this; // 缓存实例的this
  this.domElement = document.getElementById(elementId);
  this.myInstanceMethod = function() {
    console.log('这是实例方法');
  };

  this.domElement.addEventListener('click', function(event) {
    // 用self访问实例方法
    self.myInstanceMethod();
    // 这里的this指向DOM元素，直接拿id
    console.log('元素ID:', this.id);
    // 或者用event.target.id也可以
  });
}

// 用法
new MyComponent('my-button');

这三种方法里，前两种（bind和箭头函数）在ES6+里更常用，第三种是ES5时代的经典方案，现在也依然能用。根据你的项目环境选就行~

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