jquery - Typescript "this" inne i en klassemetode

Jeg vet at dette sannsynligvis er smertefullt grunnleggende, men jeg har vanskelig for å få hodet rundt det.

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

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

}

Det ser ut til å være tilfelle at jeg trenger en proxy, så la oss si ved å bruke Jquery

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

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

}

Men med bakgrunn i Actionscript 3 er jeg ikke helt sikker på hva som skjer her. Beklager, jeg er ikke sikker på hvor Javascript begynner og TypeScript slutter.

updateProxy: () => void

Og også, jeg er ikke overbevist om at jeg gjør dette riktig. Det siste jeg ønsker er at mesteparten av klassen min har en a()-funksjon som må aksesseres med aProxy(), da jeg føler at jeg skriver det samme to ganger. Er det normalt?

Svar #1

Hvis du vil at dette skal fanges på TypeScript-måten, er det via pilfunksjoner. For å sitere Anders:

Verdien av this i pilfunksjoner er leksikalsk bundet

Her er måten jeg liker å bruke dette til min fordel:

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;      
}

Se dette i TypeScript-lekeplassen

Du kan se at i den genererte JavaScript this blir fanget utenfor funksjonskallet:

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

så verdien av this inne i funksjonskallet (som kunne være window) ikke ville bli brukt.

For å lære mer: «Understanding this in TypeScript» (4:05) - YouTube

Svar #2

Hvis du skriver metodene dine på denne måten, vil 'this' bli behandlet slik du forventer.

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

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

Et annet alternativ ville være å binde 'this' til funksjonskallet:

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

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

Relaterte artikler