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

Can't access the class variables from a event handler

提问人:Mini Programmer 提问时间:10/23/2022 更新时间:10/23/2022 访问量:207

问:

我正在制作一个用于安排座位的 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);undefinedconst seatContainerConector = this.seatContainer;console.log(this.seatContainer);

JavaScript 事件处理 私有方法

评论

0赞 adsy 10/23/2022
你能发布在哪里消费/渲染吗?如果这是来自 API,则在请求返回之前,您希望它是未定义的。<Seat>

答:

1赞 Kokodoko 10/23/2022 #1

你的代码很难调试,因为你遗漏了一些基本元素,比如 、 和 、 等。new SeatMap()rowcolumnthis.seatTB

keydown 事件处理程序中的一个问题是,您的范围不是您期望的。这会导致引用错误的范围。您引用的不是类实例,而是导致 keydown 事件的元素。在该元素上,是this.seatContainerthis.seatContainerundefined

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

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

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