Héritage de classe JavaScript

L'héritage de classe JavaScript utilise le mot-clé extends.

L'héritage nous permet de définir une classe à partir d'une autre classe, ce qui facilite la création et la maintenance d'une application.

super()La méthode est utilisée pour appeler le constructeur de la classe parente.

Lors de la création d'une classe, vous n'avez pas besoin de réécrire de nouveaux membres de données et fonctions membres ; vous devez seulement spécifier que la nouvelle classe hérite des membres d'une classe existante. Cette classe existante est appelée laclasse de base (classe parente), et la nouvelle classe est appelée laclasse dérivée (classe enfant)。

L'héritage représente une relationest un. Par exemple, un mammifère est un animal, un chien est un mammifère, donc, un chien est un animal, etc.

Le code est le suivant :

//Classe de base class Animal { //fonction eat() //fonction sleep() }; //Classe dérivée class Dog extends Animal { //fonction bark() };

L'exemple suivant crée une classe "Example" qui hérite de la classe "Site" :

Exemple

class Site { constructor(name) { this.sitename = name; } present() { return 'J'aime' + this.sitename; } } class Example extends Site { constructor(name, age) { super(name); this.age = age; } show() { return this.present() + ', il a été fondé' + this.age + 'year.'; } } let noob = new Example("Example", 5); document.getElementById("demo").innerHTML = noob.show();

Essayez-le vous-même »

super()La méthode appelle le constructeur de la classe parente.

En appelant une méthode dans le constructeur,super()nous appelons le constructeur de la classe parente, ce qui permet d'accéder aux propriétés et méthodes de la classe parente.

L'héritage est utile pour la réutilisabilité du code.

JavaScript n'a pas de classes traditionnelles comme les autres langages de programmation ; il est basé sur un modèle d'héritage prototypal.

ES6 a introduit la classe et le mot-cléclass, mais le mécanisme sous-jacent est toujours basé sur l'héritage prototypal.

Utilisation de l'héritage en chaîne de prototypes

Dans l'exemple suivant, Animal est une classe de base et Dog est une sous-classe qui hérite de Animal. Dog.prototype utilise Object.create(Animal.prototype) pour créer un nouvel objet qui hérite des méthodes et propriétés de Animal.prototype. En définissant Dog.prototype.constructor sur Dog, on garantit que le constructeur de la chaîne d'héritage est correct.

Exemple

function Animal(name) { this.name = name; } Animal.prototype.eat = function() { console.log(this.name + " est en train de manger."); }; function Dog(name, breed) { Animal.call(this, name); this.breed = breed; } //Établir la chaîne de prototypes afin que Dog hérite d'Animal Dog.prototype = Object.create(Animal.prototype); Dog.prototype.constructor = Dog; Dog.prototype.bark = function() { console.log(this.name + " aboie."); }; var dog = new Dog("Buddy", "Labrador"); dog.eat(); //Appeler la méthode héritée d'Animal dog.bark(); //Appeler la méthode de Dog

Utilisation de l'héritage de classe ES6

ES6 a introduit le mot-clé class, rendant la définition de classe et l'héritage plus clairs. Le mot-clé extends est utilisé pour établir une relation d'héritage, et le mot-clé super est utilisé pour appeler le constructeur de la classe parente dans le constructeur de la sous-classe.

Exemple

class Animal { constructor(name) { this.name = name; } eat() { console.log(this.name + " mange."); } } class Dog extends Animal { constructor(name, breed) { super(name); this.breed = breed; } bark() { console.log(this.name + " aboie."); } } const dog = new Dog("Buddy", "Labrador"); dog.eat(); dog.bark();

Que l'on utilise l'héritage par chaîne de prototypes ou l'héritage de classes ES6, des effets d'héritage similaires peuvent être obtenus. Lors du choix d'une méthode, vous pouvez décider en fonction de vos préférences personnelles et des exigences du projet.

Accesseurs et mutateurs

Dans les classes, nous pouvons utiliser des accesseurs et des mutateurs pour obtenir et définir des valeurs. Les accesseurs et les mutateurs doivent être exécutés en mode strict.

Les getters et setters rendent les opérations sur les propriétés très flexibles.

Pour ajouter des getters et setters dans une classe, utilisez les mots-clés get et set.

L'exemple suivant crée un getter et un setter pour la propriété sitename :

Exemple

class Example { constructor(name) { this.sitename = name; } get s_name() { return this.sitename; } set s_name(x) { this.sitename = x; } } let noob = new Example("Example"); document.getElementById("demo").innerHTML = noob.s_name;

Essayez-le vous-même »

Remarque :Bien qu'un getter soit une méthode, n'utilisez pas de parenthèses lorsque vous souhaitez obtenir la valeur de la propriété.

Les noms des méthodes getter/setter ne peuvent pas être identiques au nom de la propriété ; dans cet exemple, la propriété est nommée sitename.

De nombreux développeurs 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 :

L'exemple suivant utilise un trait de soulignement_pour définir la propriété, et crée les méthodes getter/setter correspondantes :

Exemple

class Example { constructor(name) { this._sitename = name; } get sitename() { return this._sitename; } set sitename(x) { this._sitename = x; } } let noob = new Example("Example"); document.getElementById("demo").innerHTML = noob.sitename;

Essayez-le vous-même »

Pour utiliser un setter, utilisez la même syntaxe que lors de la définition d'une valeur de propriété. Bien que set soit une méthode, elle doit être sansparenthèses：

Exemple

class Example { constructor(name) { this._sitename = name; } set sitename(x) { this._sitename = x; } get sitename() { return this._sitename; } } let noob = new Example("Example"); noob.sitename = "EXAMPLE"; document.getElementById("demo").innerHTML = noob.sitename;

Essayez-le vous-même »

Remontée

Une différence importante entre les déclarations de fonction et les déclarations de classe est que les déclarations de fonction sont remontées, mais les déclarations de classe ne le sont pas.

Vous devez d'abord déclarer votre classe, puis y accéder ; sinon, un code comme le suivant lèvera une ReferenceError :

Exemple

//Vous ne pouvez pas utiliser la classe comme ceci ici car elle n'a pas encore été déclarée. //noob = new Example("Example") //Erreur class Example { constructor(name) { this.sitename = name; } } //La classe peut être utilisée ici. let noob = new Example("Example")

L'utiliser sans déclaration provoquera une erreur :

Si elle est déclarée avant utilisation, elle s'exécute normalement :

Autres extensions