Comment garder un contexte d'une classe en javascript (jQuery + Coffeescript)
Article d'archive. Publié il y a plus de six ans, il peut décrire des versions ou des pratiques qui ont depuis évolué. Nous le laissons en ligne pour sa valeur documentaire.
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.