Question

我有使用JavaScript事件处理程序的简单有效的代码。

var testElement = document.getElementById('test');
testElement.addEventListener('click', updateValue);

function updateValue() {
  testElement.innerHTML = 'test';
}

<div id="test">click me</div>

但是，如果我尝试将其重构为JavaScript class，则事件处理程序将引发错误，并指出testElement未定义。

class MyClass {
  constructor() {
    this.testElement = document.getElementById('test');
    this.testElement.addEventListener('click', this.updateValue);
  }
  
  updateValue() {
    this.testElement.innerHTML = 'test';
  }
}

var myClass = new MyClass();

<div id="test">Click Me</div>

错误消息显示：

Error {
  "message": "TypeError: this.testElement is undefined",
  "filename": "https://stacksnippets.net/js",
  "lineno": 19,
  "colno": 5
}

这是为什么？我该怎么做才能减轻这种限制？

Answer 1

您正在传递updateValue函数作为参数，并且在调用updateValue函数时，this关键字并未引用您认为的MyClass实例。您需要能够通过参考。

您可以在ES6中使用箭头功能来处理此问题：

class MyClass {
  constructor() {
    this.testElement = document.getElementById('test');
    this.testElement.addEventListener('click',
      e => this.updateValue()
    );
  }

  updateValue() {
    this.testElement.innerHTML = 'test';
  }
}

  var myClass = new MyClass();

事件处理程序报告在类中使用时未定义元素

1 个答案: