Comprendre l'héritage des prototypes et les ESlasses en JavaScript

JavaScript a un mécanisme d'héritage différent de celui de la plupart des langages POO conventionnels. Les prototypes sont au centre de l'attention, tandis que les classes ES6 proposent une méthode plus contemporaine. Examinons comment les classes ES6 améliorent la lisibilité et l'utilité ainsi que le fonctionnement de l'héritage des prototypes.

1. Prototype : La Fondation de l'Héritage

Chaque objet en JavaScript possède un lien interne vers un autre objet appelé son prototype. Cet objet prototype peut avoir son propre prototype, formant une chaîne.

Exemple :

const animal = { eats: true };
const rabbit = Object.create(animal);
rabbit.hops = true;

console.log(rabbit.eats); // true (inherited)
console.log(rabbit.hops); // true (own property)

Explication :

Ici, le lapin hérite de la nourriture de l'animal. Cela montre comment les objets peuvent partager des propriétés par héritage.

2. Fonctions du constructeur : construire des objets

Avant les classes ES6, JavaScript utilisait des fonctions de constructeur pour créer des objets et initialiser leurs propriétés.

Exemple :

function Animal(name) {
  this.name = name;
}
Animal.prototype.eats = true;

const dog = new Animal('Dog');
console.log(dog.name); // Dog
console.log(dog.eats); // true

Explication :

Le constructeur Animal initialise le nom. La propriété eats est ajoutée via le Animal.prototype, permettant l'héritage.

3. Objet Maître : L'Ancêtre Commun

Un objet maître sert de prototype à d'autres objets.

Exemple :

const masterObject = { type: 'Generic' };
const specificObject = Object.create(masterObject);
specificObject.name = 'Specific';

console.log(specificObject.type); // Generic (inherited)
console.log(specificObject.name); // Specific (own property)

Explication :

masterObject est l'ancêtre commun et SpecificObject hérite de sa propriété de type lors de l'ajout d'un nom.

4. Chaîne de prototypes : suivre la hiérarchie

JavaScript recherche la chaîne de prototypes pour trouver des propriétés et des méthodes.

Exemple :

const grandparent = { role: 'grandparent' };
const parent = Object.create(grandparent);
parent.role = 'parent';

const child = Object.create(parent);
console.log(child.role); // parent

Explication :

L'objet enfant recherche un rôle. Il trouve le rôle du parent, démontrant comment la chaîne de prototypes résout les recherches de propriétés.

5. Héritage de prototypes : méthodes de partage

Les objets peuvent partager des méthodes via l'héritage de prototypes.

Exemple :

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(this.name + ' makes a noise.');
};

function Dog(name) {
  Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  console.log(this.name + ' barks.');
};

const dog = new Dog('Rex');
dog.speak(); // Rex makes a noise.
dog.bark();  // Rex barks.

Explication :

Le chien hérite d'Animal, lui permettant d'accéder à la parole. Il définit également sa propre méthode d'écorce.

6. Classes ES6 : une syntaxe plus propre

ES6 a introduit une manière plus propre et plus intuitive de créer des classes.

Exemple :

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

Explication :

Cette syntaxe basée sur les classes simplifie la création et l'héritage des objets, rendant le code plus lisible.

7. Getters et Setters : gestion des propriétés

ES6 permet de définir des méthodes pour accéder ou modifier dynamiquement les propriétés des objets.

Exemple :

const animal = { eats: true };
const rabbit = Object.create(animal);
rabbit.hops = true;

console.log(rabbit.eats); // true (inherited)
console.log(rabbit.hops); // true (own property)

Explication :

Area est une propriété calculée utilisant un getter et un setter, permettant des mises à jour dynamiques.

8. Méthodes statiques : utilitaire au niveau de la classe

Les méthodes statiques appartiennent à la classe elle-même et non aux instances.

Exemple :

function Animal(name) {
  this.name = name;
}
Animal.prototype.eats = true;

const dog = new Animal('Dog');
console.log(dog.name); // Dog
console.log(dog.eats); // true

Explication :

add est une méthode statique accessible directement sur MathHelper, utile pour les fonctions utilitaires.

9. Polymorphisme : méthodes de remplacement

Le polymorphisme permet aux sous-classes de redéfinir les méthodes de la classe parent.

Exemple :

const masterObject = { type: 'Generic' };
const specificObject = Object.create(masterObject);
specificObject.name = 'Specific';

console.log(specificObject.type); // Generic (inherited)
console.log(specificObject.name); // Specific (own property)

Explication :

Les remplacements de chien parlent d'Animal, fournissant sa propre implémentation.

Conclusion

La base de la programmation orientée objet JavaScript est constituée de classes ES6 et d'héritage de prototypes. L'écriture de code réutilisable et maintenable est améliorée en sachant utiliser les fonctions de constructeur, les prototypes et les classes ES6. Pour utiliser pleinement le paradigme d'héritage de JavaScript, adoptez ces idées !

Suivez-moi sur : Github Linkedin

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!