在下面的代码段中,我有一个 TypeScript类,实例方法buz
是canvas'click
事件的监听器。
this
方法中的 buz
关键字是指事件的目标对象(画布)。
如何从foo
方法访问buz
个实例?
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
},
答案 0 :(得分:10)
当您将其作为参数传递时,您的上下文会在buz
方法中丢失。您可以使用箭头功能来实现这一目标。箭头功能将保存上下文。
public bar(): void {
this._canvas.addEventListener(`click`, (evt) => this.buz(evt));
}