L'héritage

Fait partie de la section Programmation Orientée Objet du Journey JavaScript de Coddy — leçon 24 sur 56.

L'héritage dans la POO JavaScript est un moyen pour une classe d'accéder à toutes les propriétés et méthodes d'une autre classe.

Regardons un exemple. Créez une classe parente :

class Vehicle {
 constructor(brand, model) {
   this.brand = brand;
   this.model = model;
 }
 drive() {
   console.log("Driving!");
 }
}

Maintenant, créez une classe enfant qui hérite de Vehicle :

// Car hérite de Vehicle
class Car extends Vehicle {
 honk() {
   console.log("Beep beep!");
 }
}

Créez une instance de la classe enfant :

const myCar = new Car("Toyota", "Camry");

Accéder aux propriétés et aux méthodes :

console.log(myCar.brand);  // "Toyota" - hérité de Vehicle
console.log(myCar.model);  // "Camry" - hérité de Vehicle
// Car peut accéder aux méthodes de Vehicle
myCar.drive();  // "Driving!" - hérité de Vehicle
// Car a également ses propres méthodes
myCar.honk();   // "Beep beep!" - spécifique à Car

Défi

On vous donne une classe Animal et une classe Dog qui en hérite. Votre tâche consiste à créer un objet myDog avec le nom "Buddy" et l'âge 3.

Aide-mémoire

L'héritage permet à une classe d'accéder aux propriétés et méthodes d'une autre classe en utilisant le mot-clé extends.

Classe parente :

class Vehicle {
 constructor(brand, model) {
   this.brand = brand;
   this.model = model;
 }
 drive() {
   console.log("Driving!");
 }
}

Classe enfant héritant du parent :

class Car extends Vehicle {
 honk() {
   console.log("Beep beep!");
 }
}

La classe enfant hérite de toutes les propriétés et méthodes de la classe parente et peut également avoir les siennes :

const myCar = new Car("Toyota", "Camry");
console.log(myCar.brand);  // "Toyota" - hérité
myCar.drive();  // "Driving!" - hérité
myCar.honk();   // "Beep beep!" - propre méthode

Essayez vous-même

import { Dog } from './animal.js';

// À FAIRE : Créer l'objet myDog avec le nom "Buddy" et l'âge 3.


// Code de test - ne pas modifier
console.log(myDog.name);  // Devrait afficher "Buddy"
console.log(myDog.age);  // Devrait afficher 3