Comment garder un contexte d’une classe en javascript (jQuery + Coffeescript)

Bonjour,

On rencontre souvent le problème de garder le contexte d’une classe dans une fonction qui se déclenche sur un évènement.

Par exemple :

this.GameMap = (function() {
  GameMap.prototype.initDroppable = function() {
      this.decorElement = this.currentDecorElement = null;
      $('.item-droppable').click(function(e) {
        //Ici on perd le this de la classe GameMap qui est remplacé par la target de l'évènement click, soit l'élément avec la classe '.item-droppable' sur lequel on a cliqué 
      });
   };
}

Ceci est souvent gênant car lorsque l’on veut appeler une fonction de la classe, on ne peut pas. Il faut donc arriver à garder le this à l’intérieur de la fonction appelée au déclenchement de l’évènement.

Pour cela, il suffit de déclarer une variable égale à this dans la fonction qu’on pourra réutiliser :

this.GameMap = (function() {
  GameMap.prototype.initDroppable = function() {
      var _this = this;
      this.decorElement = this.currentDecorElement = null;
      $('.item-droppable').click(function(e) {
        console.log(_this) // On a bien le this de la classe
      });
    };
});

Pour utiliser cette fonctionnalité avec coffeescript, il suffit d’utiliser le déclarant de fonction => au lieu de -> :

class @GameMap
  initDroppable: ->
    this.decorElement = this.currentDecorElement = null;
    $('.item-droppable').click((e)=>
      //On est dans le contexte de la classe
    )

Je tenais à partager cette astuce car c’était un problème que je n’avais pas encore résolu de manière réfléchie.