Pour les Jedis, JavaScript, épisode III : La revanche des Prototypes (partie 2)

Cet article fait partie de la série “Pour les Jedis, JavaScript” d’articles consacrés à JavaScript. Si ce n’est pas déjà fait, veuillez lire les épisodes précédents.

1. Pour les Jedis, JavaScript, épisode I : Au cœur des Fonctions (1 et 2)
2. Pour les Jedis, JavaScript, épisode II : L’attaque des Closures (1 et 2)
3. Pour les Jedis, JavaScript, épisode III : La revanche des Prototypes (1 et 2)

Implémentation d’une “classe”

Je constate souvent que pas mal de développeurs, particulièrement ceux qui viennent des langages objet à base de classes (Java ou C++ typiquement), préfèrent avoir une sorte d’abstraction leur permettant de simplifier l’implémentation des “classes” en JavaScript.

En JavaScript, s’il y a deux choses à retenir en POO, ce sont :

1. La notion de “classe” n’existe pas ;
2. Il n’y a pas d’héritage de classes, mais un héritage de prototypes — puisque les classes n’existent pas !

Mais grâce aux prototypes qui nous permettent d’enrichir le langage en le rendant beaucoup plus flexible, il est possible d’avoir :

1. une sorte de syntaxe pour implémenter des constructeurs et des prototypes ;
2. un mécanisme simple pour réaliser l’héritage des prototypes ;
3. un moyen d’accéder à des méthodes surchargées par le prototype.

Je tiens à préciser tout de même que ce que nous allons voir dans la suite de l’article est simplement un sucre syntaxique offert par le langage pour permettre aux développeurs qui souhaitent utiliser les “classes” de pouvoir “imiter” ce fonctionnement en JavaScript.

Je vous recommande donc lorsque vous développer en JavaScript de concevoir vos applications en raisonnant en “prototypes” et non pas en “classes” afin d’exploiter au maximum la puissance du langage. D’ailleurs, ceci est vrai pour n’importe quel autre langage.

Raisonnez toujours avec les primitives offertes par votre langage cible.

Regardons maintenant comment peut-on faire des “classes” en JavaScript…Mais avant de passer à la suite, sachez qu’il existe plusieurs façons d’écrire des “classes” en JavaScript, ce qui est normal puisque comme je l’ai précisé juste avant, JavaScript ne gère pas les “classes” et la conséquence directe de cela est que l’ont va retrouver différentes implémentations dans la communauté. Pour ma part je vais vous présenter une des implémentations, la plus simple, à mon avis.

“Classe” et héritage en ECMAScript 5 (legacy)

Reprenons l’exemple de code de notre Jedi :

Essayons maintenant de coder une abstraction qui va nous permettre de créer des objets spécialisés et bénéficier d’un héritage au passage…

A noter que ceci reste une implémentation naïve, à titre d’exemple, vous ne devriez pas l’utiliser dans vos applications en production si vous coder toujours en ES5 !

Expliquons ce que fait ce petit bout de code :

1. Nous réalisons un héritage de prototypes à ce niveau, comme vu précédemment ;
2. Nous corrigeons le constructeur de child.prototype.child pour qu’il référence celui de child, car à cause de l’étape précédente, il référence celui de parent.
3. Enfin, nous retournons le constructeur child pour qu’il puisse être instancié.

Voilà ! Vous avez maintenant une API Klass vous permettant de coder des “classes”. Voici comment nous l’utilisons :

Si vous préférez utiliser ce genre de sucre syntaxique, sachez qu’il existe une multitude de micro librairies JavaScript dédiées à cet usage, que vous allez pouvoir utiliser.

Cependant, j’ai peur que ces librairies ne soient obsolètes de nos jours. La raison ? La sortie de la nouvelle version de JavaScript : ECMAScript 6 (aussi appelé ES 2015), qui a apporté énormément de changement et de fonctionnalités qui manquaient tant au langage. Parmi elles, on retrouve une nouvelle syntaxe pour écrire des “classes” ; mais ne vous méprenez pas, cela reste uniquement un sucre syntaxique proposé par cette nouvelle version. En interne, les prototypes règnent toujours en maître.

“Classe” et héritage en ECMAScript 6 (ES 2015)

En 2018, voici à quoi ressemble la nouvelle syntaxe permettant de recourir à la POO en JavaScript tout en faisant plaisir aux développeurs adeptes des “classes” :

Tout simplement ! Vous pouvez voir la version transformée en ECMAScript 5 sur cette page Web en utilisant le transformateur de code Babel ou avec TypeScript.

Conclusion

Et Voilà ! Grâce à cette série d’articles consacrés à l’apprentissage des fondamentaux du langage JavaScript, nous avons appris et surtout compris les trois piliers du langage : les Objets à travers la POO, les fonctions et les Closures. Nous avons donc vu quelle était l’importance pour un développeur débutant en JavaScript d’apprendre vraiment ce langage afin d’en tirer le meilleur et devenir un véritable Jedi.

Prenez le temps d’apprendre, pratiquer et surtout de comprendre ces trois piliers, et vous verrez que JavaScript n’aura plus de secrets pour vous.

Que la force de JavaScript soit avec vous, fidèles Jedis !

Avez-vous aimé cet article ? Soutenez-moi avec 50 claps et Suivez moi surMedium et Twitter pour plus de contenu sur JavaScript et le Web 🎉