Héritage de classes
TeaOrder reprend la base de Order : boisson et taille sont communes, tandis que extra décrit le thé.
Après les cookies
La page précédente affichait theme / dark. Ici, on fabrique des objets en mémoire au lieu d’enregistrer un texte navigateur.
Le socle du parent
Order reçoit drink et size. Sa méthode label construit l’étiquette partagée par les commandes.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
const order = new Order("tea", "regular");
console.log(order.label());
La console affiche tea / regular. order instanceof Order vaut true, et la méthode reste sur le prototype.
Le fils commence par super
extends Order relie les classes. Le constructeur enfant doit initialiser l’héritage avant son propre champ.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
}
const tea = new TeaOrder("tea", "regular", "mint");
console.log(tea.drink);
console.log(tea.extra);
On voit tea, puis mint. Placer this.extra avant super provoque un ReferenceError.
Spécialiser sans recopier
TeaOrder remplace label, mais super.label() lui fournit déjà la partie boisson et taille.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
console.log(new TeaOrder("tea", "regular", "mint").label());
Le résultat devient tea / regular / mint. L’objet est à la fois instanceof TeaOrder et instanceof Order.
Une famille limitée
Order gère le nécessaire pour chaque commande ; TeaOrder ajoute ce qui ne concerne que le thé. Hériter pour un simple renommage serait excessif.
La ligne de la page
La démonstration crée un TeaOrder et insère l’étiquette enrichie dans le document.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
document.querySelector("#line").textContent =
new TeaOrder("tea", "regular", "mint").label();
</script>
</body>
</html>
La ligne est tea / regular / mint. theme / dark appartenait aux cookies ; tea / regular était l’étiquette du parent.
À votre tour
Construisez Order, puis TeaOrder avec mint. Faites passer super avant this.extra et prolongez super.label().
Erreurs à éviter
N’utilisez pas this trop tôt, ne recopiez pas toute la méthode parent et ne perdez pas la relation avec Order.
À retenir
extends crée le lien, super(...) prépare la base, et une redéfinition peut ajouter seulement son détail.
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut