为什么我不能在 addEventListener 中调用类函数

Question

为什么我无法在运行函数中返回 element_id？如果我将脚本设置为let self = this; function(){ self.run() }

不起作用：

class clickin {
    constructor(element_id) {
      this.element = document.getElementById(element_id);
      this.element.addEventListener('click', this.run);
    }
    run() {
      alert('Element id: ' + element_id);
    }
}

作品：

   class clickin {
        constructor(element_id) {
          this.element = document.getElementById(element_id);
          let self = this;

          this.element.addEventListener('click', function(){
            self.run();
          });
        }
        run() {
          alert('Element id: ' + element_id);
        }
    }

Answer 1

使用 addEventListener 对象，您正在设置一个回调函数，该函数将在触发事件时调用。因此，它在与构造函数不同的上下文中运行。在这种情况下，“caller(this)”对象会发生变化，因此，您上面提到的 this.run 将不起作用。但是，当您将“clickin”类对象分配给变量“self”时，您可以运行，因为 self 在回调函数中作为闭包可用，并且当事件处理程序执行时，它能够访问该“clickin”对象。您可能希望更深入地了解以下主题以更好地理解。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 2

或者，如果您不想处理类属性（如评论中所述），只需在构造函数中使用箭头函数即可：

class clickin {
  constructor(id) {
    this.element = document.getElementById(id);
    this.element.addEventListener('click', () => this.run(id));
  }
  run(id) {
    alert('Element id: ' + id);
  }
}

const c = new clickin('a');

<div id="a">aaa</div>