Héritage de classe JavaScript
Héritage de classe
Pour créer un héritage de classe, utilisez le mot- extends
clé.
Une classe créée avec un héritage de classe hérite de toutes les méthodes d'une autre classe :
Exemple
Créez une classe nommée "Model" qui héritera des méthodes de la classe "Car":
class Car {
constructor(brand) {
this.carname =
brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML
= myCar.show();
La super()méthode fait référence à la classe parent.
En appelant la super()méthode dans la méthode constructeur, nous appelons la méthode constructeur du parent et obtenons l'accès aux propriétés et aux méthodes du parent.
L'héritage est utile pour la réutilisation du code : réutilisez les propriétés et les méthodes d'une classe existante lorsque vous créez une nouvelle classe.
Getters et Setters
Les classes vous permettent également d'utiliser des getters et des setters.
Il peut être judicieux d'utiliser des getters et des setters pour vos propriétés, surtout si vous voulez faire quelque chose de spécial avec la valeur avant de les renvoyer ou avant de les définir.
Pour ajouter des getters et des setters dans la classe, utilisez les mots-clés
getet set.
Exemple
Créez un getter et un setter pour la propriété "carname":
class Car {
constructor(brand) {
this.carname
= brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
Remarque : même si le getter est une méthode, vous n'utilisez pas de parenthèses lorsque vous souhaitez obtenir la valeur de la propriété.
Le nom de la méthode getter/setter ne peut pas être le même que le nom de la propriété, dans ce cas carname.
De nombreux programmeurs utilisent un caractère de soulignement _
avant le nom de la propriété pour séparer le getter/setter de la propriété réelle :
Exemple
Vous pouvez utiliser le caractère de soulignement pour séparer le getter/setter de la propriété réelle :
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
Pour utiliser un setter , utilisez la même syntaxe que lorsque vous définissez une valeur de propriété, sans parenthèses :
Exemple
Utilisez un setter pour changer le nom de la voiture en "Volvo":
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
Levage
Contrairement aux fonctions et aux autres déclarations JavaScript, les déclarations de classe ne sont pas hissées.
Cela signifie que vous devez déclarer une classe avant de pouvoir l'utiliser :
Exemple
//You cannot use the class yet.
//myCar = new Car("Ford")
//This would
raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
let myCar = new Car("Ford")
Remarque : Pour les autres déclarations, telles que les fonctions, vous n'obtiendrez PAS d'erreur lorsque vous essayez de l'utiliser avant qu'elle ne soit déclarée, car le comportement par défaut des déclarations JavaScript est le levage (déplacement de la déclaration vers le haut).