在事件函数中引用 "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 { /* ... */ }
}

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

Referring to "this" in event function while still being able to remove the event TypeScript

javascript

keyboard-events

typescript