Javascript : Apprentissage de concept du prototypage

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 :

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 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.

Advertisements

Un avis sur « Javascript : Apprentissage de concept du prototypage »

  1. […] Les bases de JavaScript et certains concepts avancés comme les callbacks et les prototypes. […]

Laisser un commentaire

Entrer les renseignements ci-dessous ou cliquer sur une icône pour ouvrir une session :

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l’aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment ce contenu :