在事件函数中引用“this”，同时仍然能够删除事件TypeScript

Question

我在TypeScript中制作这个游戏，并尝试添加和删除“keydown”事件。事件函数是指“this”，女巫是文档，但我试图引用对象实例。

怎么能实现这一目标？

class Player {
    board: Board = new Board();
    pice: Pice = new Pice();

    constructor() {
        this.addKeyEvents();
    }

    addKeyEvents(): void {
        document.addEventListener("keydown", this.keyClick);
    }

    removeKeyEvents(): void {
        document.removeEventListener("keydown", this.keyClick);
    }

    keyClick(event: KeyboardEvent): void {
        console.log(this); // #document

        switch (event.keyCode) {

            // Left
            case 37:
                this.pice.move(-1, 0, this.board);
                break;
        }

    }

}

Answer 1

您必须将该函数绑定到实例或使用箭头函数来提供适当的上下文。

// Binding way.
class Player {
    constructor() {
        this.addKeyEvents();
        // Bind the function to `this` context.
        this.keyClick = this.keyClick.bind(this)
    }

    addKeyEvents(): void {
        document.addEventListener("keydown", this.keyClick);
    }

    keyClick(event: KeyboardEvent): void { /* ... */ }
}

// Arrow function way.
class Player {
    constructor() {
        this.addKeyEvents();
    }

    addKeyEvents(): void {
        // Create an intermediary arrow function that will keep the context.
        document.addEventListener("keydown", event => this.keyClick(event));
    }

    keyClick(event: KeyboardEvent): void { /* ... */ }
}