TypeScript - 如何从事件处理程序方法中访问类实例

Question

在以下代码片段中，我有一个TypeScript类，实例方法buz是canvas的click事件的侦听器。 buz方法中的this关键字指的是事件的目标对象(canvas)。 如何从buz方法中访问foo实例？

    class Foo {
        constructor(private _canvas: HTMLCanvasElement, private _message: string) {

        }

        public bar(): void {
            this._canvas.addEventListener(`click`, this.buz);
        }

        private buz(e: MouseEvent): void {
            console.info(`After click event, 'this' refers to canvas and not to the instance of Foo:`);
            console.info(this);
            console.warn(`Message is: "${this._message}"`); // error
        }
    }

    window.addEventListener('load', () => {
        let canvas = <HTMLCanvasElement> document.getElementById('canvas');
        let foo = new Foo(canvas, "Hello World");
        foo.bar();
    });

我的 tsconfig.json 文件有以下设置：

"compilerOptions": {
  "module": "commonjs",
  "target": "es5",
  "sourceMap": true
},

- Poulad

---

this.buz.bind(this) or () => this.buz() - Andrew Li

可能是addEventListener中处理程序内"this"的值的重复问题。 - Andrew Li

@AndrewLi 非常类似，但这个使用了TS和箭头函数。不需要使用bind。 - Poulad

Answer 1

当你将上下文作为参数传递到buz方法中时，上下文会丢失。您可以使用箭头函数来实现此目的。箭头函数将保留上下文。

public bar(): void {
    this._canvas.addEventListener(`click`, (evt) => this.buz(evt));
}

- Suren Srapyan

---

谢谢。我将我的方法调用更改为：this._canvas.addEventListener('click', evt => this.buz(evt)); - Poulad

你救了我的一天。 - Plastic