Question

为什么我无法在run函数中返回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

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

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>

Answer 2

使用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

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

2 个答案: