TypeScript绘图类添加事件监听后canvas属性变为undefined问题

当你把this.method1作为事件监听器传递给addEventListener时，事件触发后method1内部的this会指向触发事件的DOM元素（也就是页面上的canvas标签），而不是你的Canvas类实例。所以this.canvas自然是undefined，调用getContext就会抛出类型错误。

有三种常用的修复方式：

方式一：用箭头函数包裹监听器 #

添加事件监听时，通过箭头函数调用method1，箭头函数会保留外层上下文的this指向（即类实例）：

export class Canvas {
    private canvas: HTMLCanvasElement;
    constructor() {
        this.canvas = document.getElementById("main_canvas") as HTMLCanvasElement;
        // 箭头函数保留类实例的this指向
        this.canvas.addEventListener("mousedown", () => this.method1())
    }
    method1() {
        let context = this.canvas.getContext("2d") as CanvasRenderingContext2D;
        context.moveTo(0, 0);
    }
}

方式二：在构造函数中绑定this #

通过bind方法把method1的this强制绑定到类实例上：

export class Canvas {
    private canvas: HTMLCanvasElement;
    constructor() {
        this.canvas = document.getElementById("main_canvas") as HTMLCanvasElement;
        // 手动绑定this到类实例
        this.method1 = this.method1.bind(this);
        this.canvas.addEventListener("mousedown", this.method1)
    }
    method1() {
        let context = this.canvas.getContext("2d") as CanvasRenderingContext2D;
        context.moveTo(0, 0);
    }
}

方式三：将方法定义为箭头函数 #

把method1直接定义成类的箭头函数属性，这样它的this会始终绑定到类实例：

export class Canvas {
    private canvas: HTMLCanvasElement;
    constructor() {
        this.canvas = document.getElementById("main_canvas") as HTMLCanvasElement;
        this.canvas.addEventListener("mousedown", this.method1)
    }
    // 箭头函数方法永久绑定类实例的this
    method1 = () => {
        let context = this.canvas.getContext("2d") as CanvasRenderingContext2D;
        context.moveTo(0, 0);
    }
}

内容的提问来源于stack exchange，提问作者Alberto Aliberti