Héritage en javascript – Première approche
Je vous montre comment implémenter l’héritage en javascript, fort ressemblant dans son usage au langage java. 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.
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.
let NomClasse = function() {
this.p1 = undefined;
this.p2 = undefined;
}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.
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.
let Parent = function(nom, prenom) {
this.nom = nom;
this.prenom = prenom;
}
Parent.prototype.afficher = function() {
console.log("nom=" + this.nom + ",prenom=" + this.prenom);
}Constructeur et instanciation avec l’opérateur new
Si une instance modifie une méthode m, elle la modifie pour elle-même, les autres instances n’ont pas leur méthode m modifiée.
application = {};
application.Notepad = function(defaultFont) {
this.writeable = true;
this.font = defaultFont;
this.setFont = function(theFont) {
this.font = theFont;
}
}
application.notepad1 = new application.Notepad('helvetica');Qu’on utilise comme suit.
let gerard = new Parent("Mansoif","Gerard");
let 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.
let Maman = function(prenom, nom) {
this.nom = nom;
this.prenom = prenom;
this.sexe = "F";
}La classe Papa ayant ses propres attributs.
let 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);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.
let sophie = new Maman("Mansoif","Sophie");
let gerard = new Papa("Masoif","Gerard");
sophie.faireshopping();
gerard.fairebrasdefer();
sophie.afficher();
gerard.afficher();Le code suivant génère une erreur.
let gerard = new Parent("Mansoif","Gerard");
let 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.
let Parent = function(nom, prenom) {
this.nom = nom;
this.prenom = prenom;
}
let Maman = function(prenom, nom) {
this.nom = nom;
this.prenom = prenom;
this.sexe = "F";
}
let Papa = function(prenom, nom) {
this.nom = nom;
this.prenom = prenom;
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.
– 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.
L’appel d’une fonction par le biais de la fonction javascript call se fait comme suit.
// la fonction nomFonction est appelé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.
let Maman = function(prenom, nom) {
Parent.call(this, prenom, nom);
this.sexe = "F";
}Exemple pour la classe Papa.
let 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.
