javascript - 如何将requestAnimationFrame与TypeScript对象一起使用？

我有一个想要在 Canvas 上绘制的对象。它将使用requestAnimationFrame启动游戏循环:

Contoso.ts

class Contoso
{
   //private ctx: CanvasRenderingContext2D;

   Initialize(ctx: CanvasRenderingContext2D) {
      //this.ctx = ctx;
      Render();
   }

   Render() {
      //...snip doing any actual drawing for the purpose of this question
      requestAnimationFrame(this.Render);
   }
}

app.ts

var contoso: Contoso;

contoso = new Contoso();
contoso.Initialize(canvas);

有人第一次调用Initialize时，requestAnimationFrame设法正确调用Render。
requestAnimationFrame第二次调用Render，this.Render是undefined，它崩溃了。

最初调用Initialize之后，几乎就好像该对象已被破坏。

到底是怎么回事？

最佳答案

您失去了this上下文。两种可能的修复:

class Contoso
{
   /* ... */

   // Use () => syntax so Render always gets 'this' context
   // from the class instance
   Render = () => {
      //...snip doing any actual drawing for the purpose of this question
      requestAnimationFrame(this.Render);
   }
}

备用修补程序可能稍微清晰一些，但缺点是分配更多(您可能不想每帧分配1个闭包!)

   Render() {
      //...snip doing any actual drawing for the purpose of this question
      requestAnimationFrame(() => this.Render);
   }

关于javascript - 如何将requestAnimationFrame与TypeScript对象一起使用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21924719/