ヌルのプロパティ____を読むことができません

Question

練習として、私はthis tutorialを行ってから、すべてを独自のクラスに入れてクリーンアップするバージョンを作成しようとしました。問題は、私には意味をなさないと思われるエラーが発生していることです。 （すべてのコメントのものは私の最後に記入されていますが、それは問題に関連していないようでした）私はクラスからlastRender変数を削除するとUncaught TypeError: Cannot read property 'lastRender' of null at loop (game-loop.js:13)

class GameLoop { 
    constructor(player, canvas) { 
    // Set other variables 
    this.lastRender = 0; 
    window.requestAnimationFrame(this.loop); 
    } 

    loop(timestamp) { 
    let progress = timestamp - this.lastRender; // This is ln. 13 in the actual program 

    this.update(progress); 
    this.draw(); 

    this.lastRender = timestamp; 
    window.requestAnimationFrame(this.loop); 
    } 

    update(progress) { 
    // Update function 
    } 

    draw() { 
    // Draw function 
    } 

} 

さらに、それは私にそのエラーを与えて停止しますが、代わりにUncaught TypeError: Cannot read property 'update' of null at loop (game-loop.js:15)

Answer 1

thisに正しい値を設定するには.bind()を使用する必要があります。これに

window.requestAnimationFrame(this.loop); 

：この変更あなたがthis.loopでやっているようあなたがコールバックとしてメソッドを渡すと

window.requestAnimationFrame(this.loop.bind(this)); 

を、thisの値は、メソッドへの参照のみが渡されていません。したがって、window.requestAnimationFrame()がloop()を呼び出すと、を使用しようとすると表示されるエラーが表示され、thisがメソッド内で正しい値を持つように呼び出されません。