gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 05:07:07 24 4
gpt4 key购买 nike

在下面的代码片段中,我有一个 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
},

最佳答案

当您将上下文作为参数传递时,您的上下文会在 buz 方法中丢失。您可以使用箭头函数来实现这一点。箭头函数将保存上下文。

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

关于javascript - TypeScript - 如何从事件处理程序方法访问类实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44606399/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com