Héritage de classe JavaScript

Héritage de classe

Pour créer une héritage de classe, utilisez extends mot-clé.

Les classes créées par l'héritage de classe héritent de toutes les méthodes de l'autre classe :

Instance

Créer une classe nommée "Model" qui hérite des méthodes de la classe "Car":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'J'ai un ' + 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();

Essayez-le vous-même

super() méthode, on appelle la classe parente.

En appelant super() Dans la méthode, nous avons appelé la méthode constructor du parent pour obtenir l'accès aux attributs et méthodes du parent.

L'héritage est utile pour la réutilisabilité du code : réutiliser les attributs et les méthodes d'une classe existante lors de la création d'une nouvelle classe.

Getter et Setter

La classe permet également d'utiliser des getter et setter.

Il est sage d'utiliser un getter et un setter pour vos attributs, en particulier si vous voulez faire quelque chose de spécial avant ou après les renvoyer ou les définir.

Pour ajouter un getter et un setter dans une classe, utilisez get et set mot-clé.

Instance

Créez un getter et un setter pour l'attribut "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;

Essayez-le vous-même

Remarque :Même si le getter est une méthode, n'utilisez pas de parenthèses lorsque vous voulez obtenir la valeur de l'attribut.

Le nom de la méthode getter/setter ne doit pas être le même que le nom de l'attribut, dans cet exemple c'est : carname.

De nombreux programmeurs utilisent le caractère souligné _ devant le nom de l'attribut pour séparer le getter/setter de l'attribut réel :

Instance

Vous pouvez utiliser le caractère souligné pour séparer le getter/setter de l'attribut réel :

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;

Essayez-le vous-même

Pour utiliser le setter, utilisez la même syntaxe que pour affecter la valeur de l'attribut, sans parenthèses :

Instance

Utilisez le 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;

Essayez-le vous-même

Hoisting

Contrairement aux fonctions et aux autres déclarations JavaScript, les déclarations de classes ne sont pas promues.

Cela signifie que vous devez d'abord déclarer la classe, puis l'utiliser :

Instance

//Vous ne pouvez pas encore utiliser cette classe.
//myCar = new Car("Ford")
//Cela would lever un erreur.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//Maintenant, vous pouvez utiliser cette classe :
let myCar = new Car("Ford")

Essayez-le vous-même

Remarque :Pour d'autres déclarations, comme les fonctions, il n'y a pas d'erreur lors de l'utilisation de la déclaration avant la déclaration, car le comportement par défaut des déclarations JavaScript est la promotion (déplacement des déclarations en haut).