JavaScript - Héritage

Salut à toi, futurs magiciens JavaScript ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde magique de l'héritage en JavaScript. Ne t'inquiète pas si tu es nouveau dans le monde de la programmation ; je serai ton guide amical, et nous explorerons ce concept étape par étape. Alors, prends ton bâton virtuel (clavier), et plongeons dedans !

Héritage en JavaScript

L'héritage est comme transmettre des traits de famille, mais dans le monde de la programmation. Imagine que tu crées un arbre généalogique d'objets, où les enfants peuvent hériter des propriétés et des méthodes de leurs parents. Génial, non ?

Commençons par un exemple simple :

class Animal {
constructor(nom) {
this.nom = nom;
}

parler() {
console.log(`${this.nom} fait un son.`);
}
}

class Chien extends Animal {
aboyer() {
console.log(`${this.nom} aboie : Woof woof !`);
}
}

const monChien = new Chien("Buddy");
monChien.parler(); // Output : Buddy fait un son.
monChien.aboyer();  // Output : Buddy aboie : Woof woof !

Dans cet exemple, Chien hérite de Animal. Cela signifie que Chien reçoit toutes les propriétés et méthodes de Animal, plus sa propre méthode unique aboyer(). C'est comme si Buddy héritait de la capacité de parler de tous les animaux, mais a aussi son superpouvoir d'aboyer !

Héritage Simple en JavaScript

L'héritage simple se produit lorsqu'une classe hérite d'une seule classe parente. C'est comme avoir un super parent cool dont tu veux apprendre tout.

Voici un autre exemple :

class Vehicule {
constructor(marque) {
this.marque = marque;
}

demarrer() {
console.log(`Démarrage du ${this.marque}.`);
}
}

class Voiture extends Vehicule {
klaxonner() {
console.log(`${this.marque} voiture fait bip bip !`);
}
}

const maVoiture = new Voiture("Toyota");
maVoiture.demarrer(); // Output : Démarrage du Toyota.
maVoiture.klaxonner();  // Output : Toyota voiture fait bip bip !

Ici, Voiture hérite de Vehicule. C'est comme si ta voiture apprenait à démarrer du concept général des véhicules, mais sait aussi klaxonner parce que, bien sûr, c'est une voiture !

Mot-clé super() en JavaScript

Maintenant, parlons du mot-clé super(). C'est comme un signe de respect envers tes parents, reconnaisant leur contribution à ton incroyable talent.

class Animal {
constructor(nom) {
this.nom = nom;
}
}

class Chien extends Animal {
constructor(nom, race) {
super(nom); // Appel du constructeur parent
this.race = race;
}

sePresenter() {
console.log(`Je suis ${this.nom}, un chien ${this.race}.`);
}
}

const monChien = new Chien("Max", "Labrador");
monChien.sePresenter(); // Output : Je suis Max, un chien Labrador.

L'appel super(nom) dans le constructeur de Chien est comme dire, "Hey parent Animal, peux-tu t'occuper de configurer le nom pour moi ?" C'est un moyen de réutiliser la logique du constructeur du parent.

Héritage Multiniveau en JavaScript

L'héritage multiniveau est comme un arbre généalogique avec plusieurs générations. Voyons un exemple :

class Animal {
constructor(nom) {
this.nom = nom;
}

manger() {
console.log(`${this.nom} mange.`);
}
}

class Chien extends Animal {
aboyer() {
console.log(`${this.nom} dit ouf !`);
}
}

class Labrador extends Chien {
nager() {
console.log(`${this.nom} nage.`);
}
}

const monChien = new Labrador("Charlie");
monChien.manger();  // Output : Charlie mange.
monChien.aboyer(); // Output : Charlie dit ouf !
monChien.nager(); // Output : Charlie nage.

Ici, Labrador hérite de Chien, qui hérite de Animal. C'est comme si Charlie le Labrador apprenait à manger de tous les animaux, à aboyer des chiens, et a sa propre capacité spéciale de nager.

Héritage Hiérarchique en JavaScript

L'héritage hiérarchique se produit lorsque plusieurs classes héritent d'une seule classe parente. C'est comme des frères et sœurs héritant de traits du même parent.

class Vehicule {
constructor(marque) {
this.marque = marque;
}

demarrer() {
console.log(`Démarrage du ${this.marque}.`);
}
}

class Voiture extends Vehicule {
conduire() {
console.log(`Conduite de la ${this.marque} voiture.`);
}
}

class Moto extends Vehicule {
faireUnWheelie() {
console.log(`Faire un wheelie sur la ${this.marque} moto !`);
}
}

const maVoiture = new Voiture("Toyota");
const maMoto = new Moto("Harley");

maVoiture.demarrer();    // Output : Démarrage du Toyota.
maVoiture.conduire();    // Output : Conduite de la Toyota voiture.

maMoto.demarrer();   // Output : Démarrage du Harley.
maMoto.faireUnWheelie(); // Output : Faire un wheelie sur la Harley moto !

tVoiture et Moto héritent tous deux de Vehicule, mais ont chacun leurs propres méthodes.

Héritage des Membres Statiques de la Classe

Les membres statiques appartiennent à la classe elle-même, pas aux instances. Mais ils peuvent toujours être hérités ! Voyons comment :

class MathOperations {
static PI = 3.14159;

static calculerAireCercle(rayon) {
return this.PI * rayon * rayon;
}
}

class AdvancedMath extends MathOperations {
static calculerVolumeSphere(rayon) {
return (4/3) * this.PI * rayon * rayon * rayon;
}
}

console.log(AdvancedMath.PI); // Output : 3.14159
console.log(AdvancedMath.calculerAireCercle(5)); // Output : 78.53975
console.log(AdvancedMath.calculerVolumeSphere(3)); // Output : 113.09733

Ici, AdvancedMath hérite de la propriété statique PI et de la méthode calculerAireCercle de MathOperations.

Héritage Basé sur le Prototype en JavaScript

Avant les classes ES6, JavaScript utilisait l'héritage basé sur le prototype. C'est un peu plus compliqué, mais toujours important à comprendre :

function Animal(nom) {
this.nom = nom;
}

Animal.prototype.parler = function() {
console.log(`${this.nom} fait un son.`);
};

function Chien(nom) {
Animal.call(this, nom);
}

Chien.prototype = Object.create(Animal.prototype);
Chien.prototype.constructor = Chien;

Chien.prototype.aboyer = function() {
console.log(`${this.nom} aboie : Woof woof !`);
};

const monChien = new Chien("Rex");
monChien.parler(); // Output : Rex fait un son.
monChien.aboyer();  // Output : Rex aboie : Woof woof !

Cela atteint le même résultat que notre premier exemple basé sur les classes, mais utilise la syntaxe plus ancienne du prototype.

Avantages de l'Héritage

L'héritage en JavaScript offre plusieurs avantages :

1. Réutilisabilité du Code
2. Extensibilité
3. Maintenabilité
4. Polymorphisme

Voici un tableau résumant ces avantages :

Avantage	Description
Réutilisabilité du Code	Hérite des propriétés et des méthodes des classes parentes, réduisant la duplication
Extensibilité	Ajoute facilement de nouvelles fonctionnalités aux classes existantes
Maintenabilité	Les modifications dans les classes parentes se répercutent automatiquement dans les classes enfant
Polymorphisme	Utilise des objets de différentes classes par le biais du même interface

Souviens-toi, avec grand pouvoir vient grande responsabilité. Utilise l'héritage avec sagesse, et ton code te remerciera !

Et voilà, les amis ! Nous avons fait le voyage à travers le pays de l'héritage JavaScript. J'espère que ce guide t'a éclairé le chemin. Continue à pratiquer, reste curieux, et bon codage !

Credits: Image by storyset