jquery - Typescript „this“ unutar metode klase

Znam da je ovo vjerojatno nevjerojatno osnovno, ali mi je teško to shvatiti.

class Main
{
     constructor()
     {
         requestAnimationFrame(this.update);  //fine    
     }

     update(): void
     {
         requestAnimationFrame(this.update);  //error, because this is window
     }

}

Čini se da trebam proxy, pa recimo koristeći Jquery

class Main
{
     constructor()
     {
         this.updateProxy = $.proxy(this.update, this);
         requestAnimationFrame(this.updateProxy);  //fine    
     }

     updateProxy: () => void
     update(): void
     {
         requestAnimationFrame(this.updateProxy);  //fine
     }

}

Ali budući da dolazim iz pozadine ActionScript 3, nisam baš siguran što se ovdje događa. Oprostite, nisam siguran gdje JavaScript počinje, a TypeScript završava.

updateProxy: () => void

I također, nisam uvjeren da ovo radim ispravno. Posljednja stvar koju želim je da većina moje klase ima funkciju a() koju treba pristupiti preko aProxy() jer osjećam da pišem istu stvar dvaput? Je li to normalno?

Odgovor #1

Ako želite da ovo bude uhvaćeno, TypeScript način za to je putem arrow funkcija. Da citiramo Andersa:

this u streličnim funkcijama ima leksički opseg

Evo kako volim koristiti ovo u svoju korist:

class test{
    // Use arrow functions
    func1=(arg:string)=>{
            return arg+" yeah" + this.prop;
    }
    func2=(arg:number)=>{
            return arg+10 + this.prop;
    }       

    // some property on this
    prop = 10;      
}

Pogledajte ovo u TypeScript Playgroundu

Možete vidjeti da je u generiranom JavaScriptu this uhvaćen izvan poziva funkcije:

var _this = this;
this.prop = 10;
this.func1 = function (arg) {
    return arg + " yeah" + _this.prop;
};

tako da vrijednost this unutar poziva funkcije (koja bi mogla biti window) ne bi bila korištena.

Za više informacija: „Razumijevanje this u TypeScriptu“ (4:05) - YouTube

Odgovor #2

Ako pišete svoje metode ovako, 'this' će se tretirati onako kako očekujete.

class Main
{
    constructor()
    {
        requestAnimationFrame(() => this.update());
    }

    update(): void
    {
        requestAnimationFrame(() => this.update());
    }
}

Druga opcija bila bi povezati 'this' s pozivom funkcije:

class Main
{
    constructor()
    {
        requestAnimationFrame(this.update.bind(this));
    }

    update(): void
    {
        requestAnimationFrame(this.update.bind(this));
    }
}

Povezani članci