无法从事件处理程序访问类变量

Question

我正在制作一个用于安排座位的web应用程序，我已经编写了以下代码：

class SeatMap {
constructor (parentElement) {
this.#createSeats();
}
#createSeats () {
this.seatList = [];
for (let a = 0; a < this.row; a++) {
for (let b = 0; b < this.column; b++) {
this.seatList[a].push(new Seat(this,a,b));
}
}
}
class Seat {
constructor(seatContainer, rowNum, colNum) {
this.seatContainer = seatContainer;
this.seatTB.addEventListener("keydown", this.#keydownTB);
}
// Key Events Handler
#keydownTB (event) {
const seatContainerConector = this.seatContainer;
if (event.key === "ArrowRight") {
console.log(seatContainerConector); // Undefined
}
}
}
// I only wrote codes related to the problem here.

然而，console.log(seatContainerConector);只是给了我undefined
我尝试删除const seatContainerConector = this.seatContainer;并使用console.log(this.seatContainer);，但没有成功
如何解决此问题？

Answer 1

您的代码很难调试，因为您遗漏了一些基本元素，如new SeatMap()、row和column、this.seatTB等。

keydown事件处理程序中的一个问题是，您的作用域不是您所期望的。这导致this.seatContainer引用了错误的范围。您引用的不是类实例，而是导致keydown事件的元素。在该元素上，this.seatContainer是undefined

你可以用箭头功能来解决这个问题。

this.seatTB.addEventListener("click",  (e) => this.keydownTB(e));

现在this将引用new Seat()的实例，而不是导致事件的元素。