Typescript "this" à l'intérieur d'une méthode de classe

Question

Je sais que c'est probablement très basique, mais j'ai du mal à comprendre.

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

     update(): void
     {
         requestAnimationFrame(this.update);  //erreur, car this fait référence à window
     }

}

Il semble que j'ai besoin d'un proxy, donc disons en utilisant Jquery

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

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

}

Mais venant d'un environnement Actionscript 3, je ne suis pas vraiment sûr de ce qui se passe ici. Désolé, je ne suis pas sûr où commence JavaScript et où se termine TypeScript.

updateProxy: () => void

Et aussi, je ne suis pas convaincu que je fais les choses correctement. La dernière chose que je veux, c'est que la plupart de ma classe ait une fonction a() qui doit être utilisée avec aProxy() car j'ai l'impression d'écrire la même chose deux fois. Est-ce normal?

Answer 1

En bref, le mot-clé this a toujours une référence à l'objet qui a appelé la fonction.

En JavaScript, étant donné que les fonctions ne sont que des variables, vous pouvez les passer autour.

Exemple:

var x = {
   localvar: 5, 
   test: function(){
      alert(this.localvar);
   }
};

x.test() // affiche 5

var y;
y.somemethod = x.test; // assigne la fonction test de x à la 'propriété' somemethod sur y
y.test();              // affiche indéfini, this pointe maintenant vers y et y n'a pas de localvar

y.localvar = "super chaîne fantastique";
y.test();              // affiche super chaîne fantastique

Lorsque vous faites ce qui suit avec jQuery:

$.proxy(this.update, this);

Ce que vous faites est de remplacer ce contexte. En coulisses, jQuery vous donnera ceci:

$.proxy = function(fnc, scope){
  return function(){
     return fnc.apply(scope);  // apply est une méthode sur une fonction qui appelle cette fonction avec une valeur this donnée
  }
};

Answer 2

Et si on le faisait de cette manière? Déclarez une variable globale de type "myClass" et initialisez-la dans le constructeur de la classe:

var _self: myClass;

class myClass {
    classScopeVar: string = "hello";

    constructor() {
        _self = this;
    }

    alerter() {
        setTimeout(function () {
            alert(_self.classScopeVar)
        }, 500);
    }
}

var classInstance = new myClass();
classInstance.alerter();

Remarque: Il est important de NE PAS utiliser "self" car il possède déjà une signification spéciale.