使用JavaScript类与addEventListener修改HTML元素文本时出现undefined问题

核心问题是**this的指向丢失**：

• 当你直接把myheader.changeColor传给addEventListener时，点击按钮触发方法时，this指向的是触发事件的按钮元素（<button id="btn">），而不是myheader实例。按钮上没有mystring属性，所以this.mystring就是undefined。
• 直接调用myheader.changeColor()时，this会自动绑定到myheader实例，所以能正确读取this.mystring的值。

下面是三种可行的解决方法：

方法1：用bind()绑定this #

通过bind()创建一个绑定了指定this的新函数，确保方法执行时this指向myheader实例：

document.getElementById("btn").addEventListener('click', myheader.changeColor.bind(myheader));

方法2：用箭头函数包裹调用 #

箭头函数的this继承自外层作用域，这里直接调用myheader.changeColor()，自然会让方法内的this指向实例：

document.getElementById("btn").addEventListener('click', () => {
  myheader.changeColor();
});

方法3：类内用箭头函数定义方法（类字段语法） #

在类里把方法定义为箭头函数，这样方法会在实例创建时就绑定this到当前实例，后续传递方法时不会丢失指向：

class Header {
  constructor() {
    this.mystring = "Red";
  }

  // 箭头函数绑定this到实例
  changeColor = () => {
    document.getElementById("div1").innerHTML = this.mystring;
  }
}

const myheader = new Header();
// 直接传递方法即可
document.getElementById("btn").addEventListener('click', myheader.changeColor);

对于新手来说，方法2的写法最直观易懂，推荐先从这个方式入手。

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