Les objets en JavaScript

On va prendre un exemple concret. Supposons que l'on veuille gérer une boutique en ligne d'articles de sport. Tous les articles vont avoir des caractéristiques communes. Ils vont tous avoir un nom de produit, ils vont tous avoir une référence et aussi un prix hors taxes. Ils auront aussi une fonctionnalité commune car pour tous les articles on aura besoin de calculer le prix toutes taxes comprises.

1. Au niveau du code que l'on va écrire pour gérer cette boutique on voit bien que pour chaque article on va avoir besoin d'une variable produit pour stocker le nom du produit, d'une autre variable reference pour stocker la référence et d'une dernière variable prixHT pour stocker le prix hors taxes.
2. Ces variables sont liées entre elles car elles correspondent à un article. Et ces variables ont une valeur spécifique pour chacun de ces articles.
3. La première idée c'est de regrouper ces variables et de les encapsuler dans une "boîte". Cette boite on va lui donner un nom et pour ça on va se servir d'une variable. On va l'appeler article1. Déjà je peux le dire cette boîte c'est un objet. Ci-dessous je vous montre sur un schéma ce que sera l'objet article1 utilisé pour un "Sac à dos".

   

4. Si maintenant je veux fabriquer un objet pour des "Skis de rando" et bien je vais avoir besoin d'une deuxième boîte. Cette fois je vais utiliser la variable article2 et je vais refaire la même chose cet à dire avoir besoin dans la boite d'une variable pour le nom du produit, d'une autre pour la référence... Ci-dessous je vous montre avec un schéma ce que sera l'objet article2.

   

5. Deux remarques :
   • Vous imaginez facilement que si on fabriquait un objet pour une boutique réelle il aurait beaucoup plus variables car il y aurait beaucoup plus de caractéristiques.
   • Et je peux ajouter que pour une boutique réelle on aurait probablement besoin de beaucoup d'articles.

   Du coup la deuxième idée va être de fabriquer une "boîte modèle" et de l'utiliser pour construire chacun de nos articles.

   Dans notre exemple cette "boîte modèle" on va l'appeler Article. Vous voyez sur le schéma ci-dessous que les variables dans cette "boîte modèle" ne sont pas initialisées. Cette boîte doit aussi contenir la fonction calculerPrixTTC.

   

   Etant donné que l'on se sert de cette "boîte modèle" pour construire les objets. Cette "boîte modèle" on l'a appelé le constructeur. Et maintenant on ne va plus parler de "boîte modèle" mais on va parler de constructeur.

   

   Maintenant avant de partir tête baissée dans le code on va regarder ce que doit faire un constructeur pour construire un nouvel objet par exemple article3. Pour ce nouvel objet il va allouer de la mémoire puis il va regarder la liste des variables qu'on lui donné et dans cette mémoire il va implanter la même liste de variables. Ensuite il faudra qu'il initialise chacune de ces variables avec la valeur spécifique à ce nouvel objet.

6. Au niveau vocabulaire: les variables produit, reference, prixHT s'appellent les propriétés d'un objet et la fonction calculerPrixTTC s'appelle une méthode d'un objet. Ici il n'y a qu'une seule méthode mais bien sûr il pourrait y en avoir plusieurs.
7. Pour mettre en oeuvre notre constructeur en JavaScript on a plusieurs solutions. On peut utiliser une classe ou une fonction constructeur et dans la suite du tuto on va poursuivre l'exemple en utilisant une classe.

Alors pourquoi pourrait-on s'embrouiller ? Et bien parce que l'on peut dire les mêmes choses de plusieurs façons différentes.

1. De manière générale on construit les objets avec un constructeur. C'est ce qu'il faut retenir.
2. Si on utilise une classe pour le constructeur le plus souvent on dit que l'on instancie la classe. A ce moment là on parle d'instance au lieu de parler d'objet. Mais une instance et un objet c'est strictement la même chose. C'est juste une autre façon de le dire.
3. Si on utilise une fonction constructeur il m'est arrivé de lire que l'on instancie un nouvel objet à partir la fonction constructeur. C'est même une expression que j'ai trouvé dans la doc MDN.

Ne vous laissez pas embrouiller. Instancier moi je le traduis par "prendre un exemplaire". Par exemple lorsque l'on dit que l'on prend une instance d'une classe on peut dire que l'on prend un exemplaire de la classe. Lorsque on dit que l'on instancie un nouvel objet à partir d'une fonction constructeur on peut dire que l'on prend un nouvel exemplaire d'un objet à partir d'une fonction constructeur. Ce qui est important c'est de ne pas perdre de vue qu'il y a d'un côté le constructeur et de l'autre les objets.

Maintenant je vais coder le constructeur. Je vais le faire en utilisant les classes JavaScript qui sont disponibles depuis la version ECMAScript 6 soit l'édition de 2015.

Je vais prendre Sublime Text et créer sur le bureau un fichier que je vais appeler Article.html. Je fais !>script puis tab et je donne le titre Article à la page web.

// Ici je déclare la classe class Article { constructor(produit,reference,prixHT) { // this = Allocation en mémoire d'un nouvel objet this.produit = produit; this.reference = reference; this.prixHT = prixHT; console.log('typeof this => '+typeof this); // type object console.log(this); // Le nouvel objet // return du this au moment du new } calculerPrixTTC() { const TVA = 1.196; return this.prixHT * TVA; } } // Je crée un premier objet en instanciant la classe var article1 = new Article('Sac à dos',645020,35); // Je crée un deuxième objet en instanciant une nouvelle fois la classe var article2 = new Article('Skis de rando',625020,83); // On calcule le prixTTC de article 1 et 2 console.log('Prix article1 => '+article1.calculerPrixTTC()); console.log('Prix article2 => '+article2.calculerPrixTTC());

Maintenant, je fais Open in Browser dans Sublime de manière à avoir sous les yeux le code et son exécution.

1. Qu'est ce que j'ai fait dans le code ci-dessus ? En premier j'ai déclaré la classe Article.Donc ça c'est le constructeur. Comprenez bien que c'est une déclaration. C'est comme une déclaration d'une grosse fonction. Ensuite j'ai appelé la fonction en faisant le new Article(). J'ai construit un premier objet article1 en utilisant les valeurs spécifiques à article1 (* 'Sac à dos'...). Ensuite j'ai construit un deuxième objet article2 en instanciant une nouvelle fois la classe mais cette fois ci en utilisant les valeurs spécifiques à article2 (* 'Ski de rando'...).
2. Pour déclarer la classe Article, je dois utiliser le mot réservé class et le faire suivre de Article. L'usage veut que l'on mette une majuscule à Article qui signale que c'est un nom de classe. En fait cet usage vient des fonctions constructeurs. La majuscule permettant dans ce cas de différencier une fonction constructeur d'une fonction normale. On a gardé cet usage avec les classes.
3. Ensuite j'ai déclaré une fonction qui doit s'appeler constructor (constructeur en français). Donc dans la classe il y a une fonction qui va faire ce travail de construction et c'est celle là. Notez que je n'ai pas eu besoin d'utiliser le mot réservé function.
4. Cette fonction constructor est appelée au moment du new Article(). C'est le moteur JavaScript qui l'appelle ce n'est pas le programmeur. Le programmeur déclenche l'appel de constructor il ne l'appelle pas directement. Et c'est les arguments qui sont passés ici à Article() qui vont être passés à la fonction constructor.
5. La fonction constructor va allouer l'objet en mémoire. Le mot réservé this est un pointeur qui va pointer sur la zone mémoire allouée pour ce nouvel objet. Un console.log de typeof this affiche object qui est du type pointeur sur un objet. Et un console.log de this affiche l'objet qui est en cours de construction. On peut remarquer que le console.log prend un pointeur en argument et qu'il affiche l'objet pointé et non le pointeur. Pour ceux qui on fait du langage C ici le console.log déréférence le pointeur.
6. La fonction constructor va initialiser les propriétés du nouvel l'objet avec les valeurs spécifiques du nouvel l'objet. C'est ce qui se fait par exemple ici pour la propriété produit this.produit = produit. Pour pouvoir faire ça il faut que les valeurs du nouvel objet soient en paramètre de la fonction constructor. Je vais avoir besoin d'une valeur pour chaque propriété à initialiser, donc d'un paramètre pour chaque propriété. Et en général on donne le même nom au paramètre et à la propriété.

   

7. Notez bien que les variables article1 et article2 reçoivent chacune la valeur d'un pointeur. C'est une valeur retournée par le new Article(). La valeur du this. C'est comme ça que les variables article1 et article2 récupère l'adresse de l'objet en mémoire.
8. On peut le vérifier avec la console. Je fais un typeof article1 et je lis object. Donc article1 est du type pointeur sur objet.
9. Maintenant je tape article1, je déploie, je peux visualiser les trois propriétés produit reference et prixHT.

Tester le code

Tout ça c'est bien mais où est passé la méthode calculerPrixTTC ? Alors la réponse je vais la donner dans le chapitre ci-dessous.

1. Je clique sur la propriété __proto__ et je vois apparaître la méthode calculerPrixTTC().

   

2. Maintenant je tape article2 puis je déploie Article puis __proto__ et ici aussi je vois apparaître la méthode calculerPrixTTC().

   

3. A ce stade on pourrait croire que chaque objet a sa propre méthode. Heureusement ce n'est pas le cas. Imaginez qu'il y ait 1000 objets !! Ce serait idiot d'implanter 1000 fois la même méthode en mémoire.
4. En fait la méthode a été placée dans ce que l'on appelle un prototype. Il s'agit d'un objet au sens JavaScript du terme c'est à dire qu'en interne le prototype est implémenté par un objet. Dans notre exemple c'est le prototype de tous les objets de la classe Article. Il y en a qu'un seul et on va le vérifier.

   

5. Faites typeof article1.__proto__ et vous obtenez object.
6. Faites typeof article2.__proto__ et vous obtenez object.
7. Et si maintenant vous testez l'égalité de ces deux __proto__ et bien vous voyez qu'ils sont égaux c'est à dire qu'ils pointent sur le même objet.

   

Donc tous les objets construits avec la classe Article vont partager ce prototype et il faut remarquer que c'est de cette manière qu'ils vont partager le code de la méthode. Le code de la méthode n'est pas dupliqué.

Cependant si vous regardez dans le premier __proto__ vous constatez qu'il contient un autre __proto__ qui lui pointe sur le prototype d'un Object. Ensuite ça s'arrête. J'ai mis un point d'interrogation sur le schéma car on va voir à quoi ça correspond dans la suite du tuto.

Il y a une deuxième façon d'utiliser la "boîte modèle". Pour créer une nouvelle classe plutôt que de partir d'une boîte vide on va récupérer une classe qui existe déjà. Dans la nouvelle classe on va juste écrire les propriétés et les méthodes que l'on ajoute. La nouvelle classe est appelée classe enfant ou classe dérivée et la classe récupérée est appelée la classe parent. Ce mécanisme qui permet de récupérer des propriétés et des méthodes existantes s'appelle l'héritage en Programmation Orientée Objet (POO).

Il faut bien comprendre que les objets enfants que l'on construira auront les propriétés et méthodes spécifiques à la classe enfant PLUS les propriétés et méthodes de la classe parent. C'est à dire les propriétés et méthodes que la classe enfant hérite de la classe parent.

Poursuivons notre exemple. Supposons que l'on veuille mettre des articles en promotion dans notre boutique en ligne. Ces articles ont les mêmes caractéristiques que les autres articles à savoir qu'ils ont toujours un nom de produit, une référence et un prixHT. Mais en plus ils ont une propriété supplémentaire qui est la remise que l'on va faire sur le PrixTTC. Et aussi une méthode en plus pour calculer le prix de vente en promotion.

Nous ce qu'on veut c'est pas tout recommencer, alors on va se servir de la classe Article.

Etant donné que nous avons à notre disposition en JavaScript un mécanisme d'héritage on va récupérer la classe Article pour construire une nouvelle classe Promo. Et pour Promo on va se contenter d'ajouter une propriété remise et une méthode calculerPrixPromo().

Je vais sauvegarder le fichier Article.html sous un nouveau nom Promo.html. Je vais travailler maintenant sur Promo.html.

// Article est la classe parent class Article { constructor(produit,reference,prixHT) { this.produit = produit; this.reference = reference; this.prixHT = prixHT; } calculerPrixTTC() { const TVA = 1.196; return this.prixHT * TVA; } } // Promo est la classe enfant class Promo extends Article { constructor(produit,reference,prixHT,remise) { // Appel du constructeur du parent super(produit,reference,prixHT); // This pointe sur un nouvel objet de la classe promo this.remise = remise; } calculerPrixPromo() { // Appel d'une méthode de la classe parent return super.calculerPrixTTC() * this.remise; } } var article1 = new Article('Sac à dos',645020,35); var article2 = new Article('Skis de rando',625020,83); var promo = new Promo('Sac à dos',645020,35,0.8);

1. Je déclare la classe Promo comme une extension de la classe Article. Je dois utiliser le mot réservé extends.
2. Maintenant je dois déclarer un constructeur pour la classe Promo. Ce constructeur doit prendre comme paramètres de déclaration l'ensemble des propriétés des deux classes puisque les propriétés des deux classes doivent être affectées au moment de l'instanciation. Les propriétés produit, reference et prixHT de la classe parent et la propriété remise de la classe dérivée.
3. Dans ce constructeur, je dois appeler le constructeur de la classe parent en utilisant le mot réservé super. Et je passe les paramètres de déclaration du parent.
4. Ensuite je dois initialiser la propriété de la classe enfant. Ici il n'y a que remise. J'utilise à nouveau this qui pointe ici toujours sur un nouvel objet mais cette fois ci un objet de la classe Promo.
5. Ensuite je passe au codage de la méthode calculerPrixPromo. Pour cela j'ai besoin d'accéder à la méthode calculerPrixTTC de la classe parent et pour y accéder je dois à nouveau utiliser le mot réservé super. Mais cette fois ci je dois utiliser la notation pointée.
6. Ensuite je peux instancier Promo en prenant bien soin de mettre tous les paramètres d'appel.

Tester le code

1. Reprenez le fichier Promo.html, avec la console examinez l'objet promo.
2. Vous constatez que le prototype de Promo semble "contenir" celui d'Article. En fait c'est le pointeur __proto__ du prototype de promo qui pointe vers celui d'Article.

Ca veut dire qu'un prototype contient un pointeur vers un autre prototype. On a donc une liste chaînée de prototypes qui se termine par le prototype de l'objet Object.

Pour le vérifier on va prendre l'objet promo et on va aller sur son prototype puis on va descendre sur sa propriété __proto__. On va comparer cette valeur à celle de article1.__proto__. On va constater que les valeurs sont égales ce qui prouve le chaînage des prototypes.

Je résume le fonctionnement qui est très simple : si une propriété est demandée, l'interpréteur regarde d'abord dans l'objet. Si elle n'est pas dans l'objet il la cherche dans le prototype de l'objet. Si elle n'y est pas il remonte au prototype du parent et ainsi de suite jusqu'au prototype de Object. Le prototype de Object est le prototype de l'objet qui est en haut de la hiérarchie.

C'est une autre façon de procéder pour créer un objet. Dans ce cas, le plus souvent, on commence par créer un objet vide en utilisant les accolades. Puis on ajoute ou on supprime des propriétés de manière dynamique. JavaScript a cette capacité de nous permettre d'ajouter ou de supprimer des propriétés au fur et à mesure de notre besoin.

Pour ajouter une propriété il suffit d'affecter une nouvelle propriété.

Pour supprimer une propriété il faut utiliser l'opérateur delete.

1. Avec Sublime faites CTRL+N pour créer un nouveau fichier puis CTRL+S pour le sauvegarder sur le bureau. Vous lui donnez le nom de Litteral.html. Faites !>script puis tab. Donnez le titre Litteral à la page web.
2. Déclarez un objet vide article en utilisant les accolades.
3. Ajoutez la propriété produit en affectant article.produit à 'Sac à dos'.
4. Ajoutez la propriété reference en affectant article.reference à 645020.
5. Ajouter la propriété prixHT en affectant article.prixHT à 35.
6. Ajouter la propriété stock en affectant article.stock à 10.
7. Supprimez la propriété reference avec un delete sur article.reference.
8. Faites un console.log() pour afficher l'objet.
9. Faites un clic droit dans Sublime puis choisissez Open in Browser. Puis CTRL+SHIFT+I pour accéder à la console.
10. Vérifiez la liste des propriétés.

var article = {}; // Un objet vide // Ajout des propriétés article.produit = "Sac à dos"; article.reference = 645020; article.prixHT = 35; article.stock = 10; // Suppression d'une propriété delete article.reference; console.log(article); Tester le code

Vous pouvez aussi utiliser la syntaxe JSON pour créer un objet avec ses propriétés initialisées. Chaque propriété est composée d'un couple nom et valeur. Le nom et la valeur sont séparés par le caractère deux points. Chaque couple nom et valeur est séparé par une virgule.

1. Effacez ce qu'il y a dans l'élément script de Litteral.html sauf le console.log().
2. Déclarez un objet en utilisant la syntaxe JSON.
3. Faites un clic droit dans Sublime puis choisissez Open in Browser. Puis CTRL+SHIFT+I pour accéder à la console.
4. Vérifiez la liste des propriétés.

var article = { produit : "Sac à dos" , reference : 605020 , prixHT : 35 }; console.log(article); Tester le code

On peut se poser deux questions :

1. Est ce que la propriété existe que ce soit dans l'objet ou dans sa chaîne de prototype ? C'est l'opérateur in qui répond à cette question. Il vous renvoie true si la réponse à la question est affirmative.
2. Est ce que la propriété existe dans l'objet ? C'est la méthode hasOwnProperty() qui répond à cette question. Elle renvoie true si la propriété se trouve dans l'objet. Elle renvoie false si la propriété se trouve dans la chaîne de prototype, y compris le prototype de l'objet lui même.

On va tester ces deux moyens d'abord sur la propriété remise et sur la méthode calculerPrixPromo() qui appartiennent à l'objet Promo, puis sur la propriété valueOf qui elle appartient à Object.

var promo = new Promo('Sac à dos',645020,35,0.8); // True car remise existe directement dans l'objet console.log(promo.hasOwnProperty('remise')); // False car calculerPrixPromo se trouve dans le prototype de Promo console.log(promo.hasOwnProperty('calculerPrixPromo')); // False car Valueof se trouve dans le prototype de Object console.log(promo.hasOwnProperty('valueOf')); // True car remise existe. Ici dans l'objet console.log('remise' in promo); // True car valueOf existe. Ici dans la chaîne de prototype console.log('valueOf' in promo); Tester le code

var promo = new Promo('Sac à dos',645020,35,0.8); // boucle sur les propriétés de l'objet for (var prop in promo) console.log(prop); Tester le code

Reprenez le fichier Article.html.

On a vu que article1 est un pointeur. Vous allez passer ce pointeur à une fonction. Le pointeur va être passé par copie comme expliqué dans le tuto sur les fonctions. Mais ce pointeur permettra un accès à l'objet et permettra une modification des propriétés de l'objet depuis la fonction.

Bien sûr article1 est globale et on peut y accéder dans la fonction modifier mais ce n'est pas ce que je veux montrer.

var article1 = new Article('Sac à dos',642050,35); function modifier(unObjet) { unObjet.prixHT = 20; } modifier(article1); console.log(article1.prixHT); Tester le code