onmousedownから呼び出した時のthisの扱い

Question

前提・実現したいこと

HTML5のcanvasオブジェクトを使ってペイントアプリを作っています。
オブジェクト指向を勉強中で今回もオブジェクト指向を用いて作っています。
DrawManagerクラスを作り、そのインスタンスを始めに作成し、コンストラクタでメンバ変数canvasにhtml上のcanvasオブジェクトを入れています。

canvasをクリックしてその座標に四角を描画するところで分からないことが起こりました。

発生している問題

this.canvas.onmousedown = this.pushCanvas;

(thisはDrawManagerインスタンス)
とthis.canvasのonmousedownメソッドにthis.pushCanvas関数(メソッド)を代入し、this.canvasがクリックされたときpushCanvasメソッドが実行されるようにしています。pushCanvas内でthis.ctxやthis.pixelなどDrawManagerインスタンスのメンバ変数を参照しようとすると、未定義エラーが起きます。原因はpushCanvas内ではthisがDrawManagerインスタンスではなく、htmlのcanvasオブジェクトを参照してしまっています。javascriptでのthisの扱いがまだよくわかっていないので、DrawManagerクラス内でpushCanvasメソッドを定義しているのに、this.canvas.onmousedownからpushCanvasを呼び出すとthisがDrawManagerインスタンスを示さずに、canvasオブジェクトを示す理由が分からないです。解決策を教えて頂きたいです。

該当のソースコード

class DrawManager {
    constructor() {
        // Initiative
        this.canvas = document.getElementById("main");
        this.ctx = this.canvas.getContext("2d");
        this.x = 10;
        this.y = 10;
        this.pixel = 1;
    }
    pushCanvas(event) {
        """
        略
        """
        this.ctx.beginPath();
        this.ctx.rect(x, y, this.pixel, this.pixel);
        this.ctx.fillStyle = this.color;
        this.ctx.fill();
    }
}
window.onload = function() {
        const manager = new DrawManager();
        manager.canvas.onmousedown = manager.pushCanvas;
}

試したこと

DrawManagerインスタンスのメンバ変数canvasの下にpixelやctxなどを置くことも考えましたが、後々色々な処理を追加するときにDrawManagerインスタンスにあった方がいいので出来れば避けたいです。また、ctxやpixelなどをグローバル変数にして動作はしますが、保全性から考えて避けたいです。

Answer 1

jsではfunctionを定義すると全てのオブジェクトにメソッドとして利用出来るから、thisというのは呼び出し元のオブジェクトになるようです。他の言語のようにthisを呼び出し元に依存しないで、そのスコープ内でのthisを参照するにはアロー関数を使えば良いようです。今回の場合は

this.canvas.onmousedown = e => {
     this.pushCanvas(e);
};

とすることで解決しました。