Prototypes et héritage

  1. Prototype
  2. Héritage

1. Prototype

Avant d’aller plus loin, voyons d’abord que c’est un prototype en JavaScript.
Le prototype est une propriété des fonctions, ainsi que des objets créés par les fonctions constructeurs.
Il est à noté aussi que le prototype d’une fonction est un objet vide (donc on peut y ajouter des éléments).

La propriété prototype permet d’ajouter des propriétés et des méthodes à un objet.
Syntaxe :
objet.prototype.name=valeur

Pour que ça soit clair, voyons un exemple :

Le code ci-dessous, affichera 25

2. Héritage

Comme nous l’avons déjà expliqué sur notre cours intitulé La notion d’objet en JavaScript , la notion de classe en JavaScript n’existe même pas. Mais dans ce cours, nous allons utiliser le terme classe afin de mieux expliquer cette partie.
Prenons l’exemple de 3 classes : la classe membre, la classe administrateur, la classe samomoi. Maintenant voyons comment se fait l’héritage de classe.

Nous attribuons classe membre à membre, classe administrateur à administrateur et classe samomoi à samomoi.

D’abord, nous allons créer la fonction constructeur pour la classe membre.

L’operateur logique || est utilisé en cas si aucune valeur n’est passée dans la fonction, nom et prenom ne seront pas sans valeurs.

Ensuite nous allons créer la fonction constructeur pour la classe administrateur. Dans ce cas, on fait ceci :

Puis nous mettons en place un héritage dynamique. Dans ce cas, nous allons utiliser le prototype d’administrateur ainsi :

Maintenant nous allons étendre les capacités d’administrateur en utilisant la fonction displaySpecs qui doit consigner les détails d’administrateur à la console à l’aide de console.log :

Maintenant nous allons créer un nouveau administrateur :

Maintenant nous pouvons appeler la fonction displaySpecs

Enfin maintenant nous allons étendre les capacités du membre en ajoutant un paramètre. On ne sait jamais si on peut avoir besoin d’ajouter une propriété. Le cas où on veut ajouter le paramètre sexe à membre, on ferra ainsi :



Une question? Cliquez ici pour la poser.

Retour sur le portail du JavaScript