Héritage en javascript – Première approche




 

Dans l’article 5 manières de créer des objets en javascript, je vous montrais différentes manières de créer des classes et des objets en javascript. Cependant, je ne parlais pas d’héritage.

Je vous montre comment implémenter l’héritage en javascript, fort ressemblant dans son usage au langage java.

 

Créer une classe en javascript

La simple définition d’une fonction suffit à créer une classe.

Dans l’exemple ci-dessous, on définit une classe NomClasse avec 2 propriétés p1 et p2 :

var NomClasse = function() {
  this.p1 = undefined;
  this.p2 = undefined;
}

[notice]
Bien que l’apparence soit trompeuse, ne pas confondre l’opérateur this des langages objets tels que java avec celui de javascript.
En java, this représente l’objet en tant que tel (pointeur sur l’objet lui-même).
En javascript, this représente un contexte d’utilisation ou d’appel et non l’objet lui-même.
[/notice]

On lui ajoute la méthode afficher par le biais du prototype.

– un prototype javascript n’est ni plus ni moins qu’une structure de données rattachée : cette structure peut donc encapsuler des propriétés ou des fonctions;
– si vous définissez une méthode par le biais d’un prototype javascript, chaque instance partagera cette méthode : sa modification entrainera donc une modification pour toutes les instances;
– dans le cas contraire : sa modification n’aura d’effet que sur l’instance sur laquelle la modification a été appliquée.

 

NomClasse.prototype.afficher = function() {
  console.log("p1=" + this.p1 + ",p2=" + this.p2);
}

Dans l’exemple suivant, on définit une classe Parent et une méthode afficher rattachée à cette classe :

var Parent = function(nom, prenom) {
  this.nom = nom;
  this.prenom = prenom;
}
Parent.prototype.afficher = function() {
  console.log("nom=" + this.nom + ",prenom=" + this.prenom);
}

Qu’on utilise comme suit :

var gerard = new Parent("Mansoif","Gerard");
var sophie = new Parent("Mansoif","Sophie");
gerard.afficher();
sophie.afficher();

 

L’héritage en javascript

Rien de complexe, on définit deux classes Maman et Papa par le biais d’une fonction comme pour Parent (la classe parente).

La classe Maman ayant ses propres attributs :

var Maman = function(prenom, nom) {
  this.nom = nom;
  this.prenom = prenom;
  this.sexe = "F";
}

La classe Papa ayant ses propres attributs :

var Papa = function(prenom, nom) {
  this.nom = nom;
  this.prenom = prenom;
  this.sexe = "M";
}

Remarquez qu’a été repris le code du constructeur de la classe Parent.

Pour que les deux classes Maman et Papa héritent de la classe Parent, il suffit de faire pointer le prototype des classes filles sur celui de la classe parente, comme ceci :

Maman.prototype = Object.create(Parent.prototype);
Papa.prototype = Object.create(Parent.prototype);

Remarquez comme c’est simple….

Attention toutefois à définir les méthodes des classes filles après avoir fait pointer son prototype sur celui de la classe parente. Dans le cas contraire, la définition de la méthode spécifique à la casse fille serait purement et simplement écrasée.

On définit ensuite les méthodes des classes filles :

Maman.prototype.faireshopping = function() {
  console.log("faire du shopping");
}

Papa.prototype.fairebrasdefer = function() {
  console.log("faire un bras de fer");
}

Ensuite, on les utilise comme suit :

var sophie = new Maman("Mansoif","Sophie");
var gerard = new Papa("Masoif","Gerard");

// sophie fait du shopping - méthode propre à Maman
sophie.faireshopping();

// gerard fait un bras de fer - méthode propre à Papa
gerard.fairebrasdefer();

// sophie et gerard affichent - méthode héritée de Parent
sophie.afficher();
gerard.afficher();

Le code suivant génère une erreur::

var gerard = new Parent("Mansoif","Gerard");
var sophie = new Parent("Mansoif","Sophie");
gerard.fairebrasdefer();
sophie.faireshopping():

Ce qui est parfaitement cohérent puisque les méthodes étant définies dans les classes filles ne peuvent être appelées par la classe parente.

 

Appeler une méthode de la classe parente depuis la classe fille en javascript

Remarquez que dans les constructeurs des classes filles, le code de la classe parente a été repris :

var Parent = function(nom, prenom) {
  this.nom = nom;
  this.prenom = prenom;
}
var Maman = function(prenom, nom) {
  this.nom = nom; // code repris
  this.prenom = prenom; // code repris
  this.sexe = "F";
}
var Papa = function(prenom, nom) {
  this.nom = nom; // code repris
  this.prenom = prenom; // code repris
  this.sexe = "M";
}

Pour éviter ce genre de copie qui est une mauvaise pratique, il serait préférable d’appeler le constructeur de la classe parente.

Toutefois, javascript n’étant pas un langage objet au même titre que peut l’être java ou c++, il va falloir utiliser un artifice.

L’artifice en question étant un appel de la fonction Parent en l’invoquant avec la fonction javascript call.

[notice]
call permet d’appeler une fonction avec, le cas échéant, des paramètres.
call prend au moins un premier paramètre qui est le contexte d’appel, suivi des paramètres de la fonction invoquée.
[/notice]

L’appel d’une fonction par le biais de la fonction javascript call se fait comme suit :

// la fonction nomFonction est appelée
// 1er paramètre = contexte d'appel
// 2 à n paramètres = les paramètres de la fonction invoquée
nomFonction.call(contexte-appel, paramètre1, ...., paramètreN);

Illustration avec l’appel du constructeur de la classe parente (Parent) de la classe Maman, équivalent à la méthode super de java :
 
Exemple pour la classe Maman :

var Maman = function(prenom, nom) {
  Parent.call(this, prenom, nom);
  this.sexe = "F";
}

 
Exemple pour la classe Papa :

var Papa = function(prenom, nom) {
  Parent.call(this, nom, prenom);
  this.sexe = "M";
}

On pourrait aussi créer une classe Fille de la même manière :

var Fille = function(prenom, nom) {
  Maman.call(prenom, nom);
}
Fille.prototype = Object.create(Pere.prototype);
C’était une première approche de l’héritage en javascript. Ce langage évoluant, de nouveaux moyens d’implémenter l’héritage javascript sont apparus. A suivre dans un prochain article.

 

Si vous avez aimé cet article, partagez le.

 

Si vous constatez des coquilles, ou avez des remarques à faire ou encore souhaitez manifester votre satisfaction de ce tuto, n’hésitez pas les commentaires sont faits pour ça.

 

Posté dans html5Taggé emacscript, heriage javascript, heritage, javascript  |  2 commentaires

2 réponses à "Héritage en javascript – Première approche"

Répondre

*