L'orienté objet en JavaScript, cheat sheet

Publié par Jean-Nicolas Viens le mercredi 17 décembre 2014 à 20:05

Avant de vous donner cette fameuse cheat sheet, qui saura être utile je l'espère, je voudrais vous montrer deux dernières possibilités avec les objets: les méthodes statiques et comment il est possible de manipuler le mot-clé this pour changer sa valeur avant d'invoquer une fonction.

Méthodes statiques

Ça ne faisait pas parti de l'exemple initial, mais ça peut être intéressant!

Comment faire une méthode statique? C'est simple, il faut juste se rappeler que tout est un objet! Donc on peut écrire :

var Cart = function() { ... }
Cart.methodeStatique = function() { return "méthode statique"; }

Un seule attrape : on ne peut pas invoquer une méthode statique sur un objet, on doit passer par le nom de la classe (i.e. Cart.methodeStatique(), et non uneinstanceDeCart.methodeStatique()).

Fait intéressant : essayez de faire afficher this à l'intérieur d'une fonction statique. Étrange non? Il y a une utilité à cela, je vous laisse y réfléchir!

Manipuler la valeur du this

Vous êtes-vous déjà demandé comment jQuery fait pour que, magiquement, this contienne l'élément du DOM lors d'événements? Par exemple:

$('.element').on('click', function() {
  // this prend la valeur de l'élément cliqué
});

Il y a trois fonctions disponibles en JavaScript pour arriver à cette fin.

Les deux premières sont très semblables; call prend une liste de paramètres, alors que apply prend un tableau d'arguments. La différence est mince, mais selon le cas d'utilisation une version peut s'avérer plus utile que l'autre. Par contre, dans les deux cas le premier argument est toujours la valeur qui sera associée à this! C'est de cette façon que jQuery manipule la valeur du this et permet ainsi un API plus concis.

Une autre fonction nommée bind permet d'associer des arguments (y comprit this) à une fonction, sans l'invoquer. C'est plutôt difficile au début de voir l'utilité de cette technique, mais sachez qu'elle est bien documentée dans le monde des langages fonctionnels sous le nom de curried functions ou currying. Ce concept est parfois également appelé partial application dépendamment du langage; ce sont deux concepts similaires, mais différents.

Manipuler la valeur du this est à faire avec précaution! Vous pourriez surprendre votre utilisateur, votre collègue et vous-même.

Cheat sheet

Je ne suis pas souvent en faveur des bouts de code à copier/coller sans prendre le temps de les comprendre, mais ici il y a beaucoup de code de base requis pour rien.

Je vous offre donc exceptionnellement cette cheat sheet, mais si vous essayez de faire quelque chose et que ça ne fonctionne pas, prennez le temps de relire cet article pour bien comprendre.

var Classe = (function() {

  var constanteOuStaticPrivee;

  function Classe() {
    this.public = 1;
    this._prive = 2;
  }

  Classe.prototype.fonctionPublique = function() { 
    return this.publique + this._prive;
  }

  Classe.fonctionStatic = function() {}

  return Classe;

})();

Simplement copier/coller ce bout de code et faire un rechercher/remplacer du mot Classe par le nom de votre classe! Encore mieux, il est possible d'en faire un "live template" dans la majorité des IDE modernes.

Exercice

Dans un callback jQuery, on sait que this vaut l'élément du DOM sur lequel l'événement est arrivé. Par exemple 

$('#element').click(function() {
  this.tagName; // Le nom du tag HTML, vu que this = l'élément du DOM
});

Dans ce cas, proposez une solution qui permet d'avoir accès aux attributs de notre objet puisque this ne peut pas valoir deux choses à la fois! Voici un exemple de ce qui ne fonctionne pas :

var Classe = (function() {

  function Classe() {
    this.message = "salut!";
  }

  Classe.prototype.fonction = function() {
    $('#element').click(function() {
      // 'this' ne peut pas valoir 2 choses en même temps!
      // Ici 'this' est l'élément du DOM, donc this.message est "undefined"
      $(this).text(this.message);
    });
  };

  return Classe;
})();

Conclusion

Essayez ces technique et dites-moi si votre code s'en porte mieux! N'oubliez pas que ces techniques d'orienté objet facilitent grandement les tests, avec Jasmine.js par exemple.

blog comments powered by Disqus

0 Comments:

Post a comment

Comments have been closed for this post.