Je me suis levé ce matin avec une idée en tête. Cette idée est littéralement la première chose qui m’est venue en tête.
Il y a de cela un bon moment que j’ai laissé de côté la certaines notions avancées du langage de programmation Javascript. Force est d’admettre que la tendance au Javascript est loin de s’arrêter et progresse sans arrêt. C’est alors que je me suis dis qu’il est temps de prendre le taureau par les cornes et le maîtriser si on veut avancer.
C’est donc pour cette raison que je me suis dis qu’aujourd’hui serait une journée parfaite pour apprivoiser la bestiole qu’est le prototypage dans Javascript. Quoi de mieux que de l’écrire pour le retenir?
Allons y pour la théorie. Le code suivra par la suite, naturellement. D’accord? Oui? Allons-y!
Prototypes
Un prototype, avec Javascript, est ce qui permet de recréer le concept d’héritage dans un langage comme JavasScript qui n’a pas de notions de classes.
En premier lieu, un prototype est ce qui permet de recréer le concept d’héritage dans un langage comme JavasScript qui n’a pas de concept d’héritage. De plus, une fonction qui a des propriétés de créées sous la propriété prototype va transmettre ses fonctions à ses objets instanciés.
Un exemple de ceci est le suivant :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var x = function func(){ | |
| //rien, juste pour l'exemple | |
| } | |
| x.prototype.log = function() { | |
| console.log("2"); | |
| } | |
| var a = new x(); | |
| a.log(); //retourne "2" |
Une fonction x est créée et une fonction log a été associée en prototype. L’objet a ensuite accès à la fonction log comme si elle lui appartenait.
Ce simple bout de code introduit quelques concepts qui peuvent être nouveau lorsque vous provenez d’un monde orienté objet comme moi. C#, en occurence.
Il va de soi que l’objet x est une fonction. Elle agit aussi comme le constructeur de a. Par exemple, si on exécute a.constructor(), le résultat affiché à l’écran sera « constructor ».
Lorsqu’un objet est instancié comme a l’est, il obtient en référence les fonctions et proprités du prototype de son objet constructeur. Une autre image pour ce concept est que l’objet construit obtient un pointeur vers le prototype du constructeur.
À ce moment là, Javascript met à notre disposition deux utilitaires permettant de déterminer où se situe notre objet dans la hiérarchie de prototypage.
- isPrototypeOf : Détermine si un objet donné est le prototype d’un autre. Par exemple, exécuter x.prototype.isPrototypeOf(a) retourne true.
- La propriété constructor : Retourne l’identité du constructeur d’un objet. Par exemple, exécuter a.constructor === x va retourner true.
Annexe 1 – Création d’objets
En lisant la définition annotée du standard ECMAScript, j’ai appris que je ne savais pas vraiment comment créer un objet. Lorsqu’on vient d’un monde statiquement typé comme C#, les objets s’instancient avec le mot clé new.
Depuis la version 5 du standard ECMAScript, il est possible de créer des objets à la main avec l’aide de la fonction Object.Create. Cette fonction permet de créer l’objets désiré en spécifiant son prototype et ses propriétés.
Conclusion
L’objectif que je m’étais fixé a été atteint. Je voulais apprendre et, finalement, bien saisir le concept de prototypage avec le langage de programmation JavaScript.
Cette question, pendant les deux premières journées où j’ai planché sur la question, a même été jusqu’à me réveiller la nuit et occuper mes rêves. J’avais une réelle intention d’aller jusqu’au bout. Je dois même avouer que c’est la première fois que je me donne autant pour un article.
Ce billet se veut comme la documentation de mes apprentissages sur le sujet. Espérant que cela puisse être utile à quelqu’un, un jour.
French Coding 
Une réflexion sur “Javascript : Apprentissage de concept du prototypage”