javascript - 类方法在直接创建对象时起作用，但在通过事件监听器创建时不起作用

Question

我有一个类也提供了一些方法。当我直接创建这个类的一个对象并调用这个对象的方法时，一切都按预期工作。如果我让事件侦听器创建对象，则该对象将使用其所有属性（包括通过用户输入确定的名称属性）创建。但是，如果我想通过另一个按钮调用对象的方法，该按钮在创建对象期间连接到该对象的事件监听器，我不会得到预期的结果。

class Kitten{
  constructor(name) {
    this._name = name;
    // ...
  }
  timePasses() {
  console.log("time is passing");
  // ...
  }
  pet() {
  console.log(`You pet ${this._name}`);
  this.timePasses();
  }
}

const nameInput = document.getElementById("name-input");
const nameKittenButton = document.getElementById("name-btn");

function nameKitten () {
  const petButton = document.getElementById("pet");
  if (nameInput.value != "") {
    const kitten = new Kitten(nameInput.value);
    petButton.addEventListener("click", kitten.pet);
    console.log(kitten);
  }
}

nameKittenButton.addEventListener("click", nameKitten);

这按预期工作：

const kitten = new Kitten("Carlo");
console.log(kitten);
kitten.pet();

但是，当我使用按钮+输入创建小猫然后使用宠物按钮时，我将其作为输出：

You pet undefined
Uncaught TypeError: this.timePasses is not a function
...

我只包含了我认为相关的代码。如果需要，我可以提供其余的。我已经尝试过箭头和普通功能，因为我曾经听说过并体验过普通和箭头功能的处理this方式不同。然而，这并没有奏效。我仍然认为该错误与如何this处理有关...

标签： javascriptclassmethodsthis