این - چگونه از requestAnimationFrame با یک شیء TypeScript استفاده کنیم؟

من یک شیء دارم که میخواهم روی یک بوم نقاشی کنم. این از 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);
   }
}

راهحل جایگزین احتمالاً کمی واضحتر است، اما عیب آن این است که مقدار زیادی تخصیص ایجاد میکند (احتمالاً نمیخواهید به ازای هر فریم یک closure تخصیص دهید!)

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

پاسخ شماره ۲

از نحو پیکان (لامبدا) استفاده کنید:

requestAnimationFrame(() => this.Render());