javascript - JavaScript の OOP: メソッドがコールバックとして渡されると、「this」スコープが変更されます

Question

p5という素敵なライブラリを使用して JavaScript プログラムをコーディングしています。javascript で OOP を試みていますが、ポインターthisのスコープに問題があります。BackgroungToolsクラスのコンストラクター内で、以下に示すように、いくつかのクラスのメンバーを定義します。

BackgroundTools = function() {
        this.isBackgroundToolsOn = false

        this.backgroundButton = createButton('Background')
        this.backgroundButton.position(20,20)
        this.backgroundButton.mouseClicked(this.toggleBackgroundTools)

        this.backgroundSliderRed = createSlider(0,255)
        this.backgroundSliderRed.position(20,50)
        this.backgroundSliderRed.hide()
        console.log(this)
}

BackgroundTools.prototype.toggleBackgroundTools = function() {
    console.log(this)
    if (this.isBackgroundToolsOn) {
            this.backgroundSliderRed.hide()
            this.isBackgroundToolsOn = false
    } else {
            this.backgroundSliderRed.show()
            this.isBackgroundToolsOn = true
    }
}

コンストラクターのmouseClickedは、クラスから引数としてメソッドを受け取ることに注意してください。これはコールバック関数です。その後、p5 のsetup関数内でこのクラスをインスタンス化します。

function setup() {
    canvas = createCanvas(800,600)
    background(0)
    backgroundTools = new BackgroundTools()
}

function draw() {
}

これがコンストラクターで出力されると、期待されるもの (現在のオブジェクトへのポインター) が得られます。しかし、ボタンをクリックして、toggleBackgroundToolsメソッドが呼び出されると、内部のthisは期待どおりではありません。現在のオブジェクトへのポインターではなく、コンソールに次のように表示されます。[top: Window[0], window: Window[0], location: Location, external: Object, chrome: Object…]

p5.ElementのメソッドmouseClickedがthisのスコープを変更していると思います。しかし、 toggleBackgroundToolsメソッドでクラスのメンバーにアクセスしたいと考えています。

誰かがこれを経験したことがありますか？この状況にどのように対処できるかについてのアイデアはありますか?

どうもありがとう！