Comprendre l'héritage prototypique en JavaScript : guide du débutant

JavaScript est un langage puissant et dynamique avec un paradigme de programmation orientée objet (POO). Contrairement à de nombreux autres langages POO (tels que Java ou C ), JavaScript n'utilise pas l'héritage classique. Au lieu de cela, il utilise un héritage prototypique, à la fois flexible et unique.

Dans ce blog, nous approfondirons le concept d'héritage prototypique, explorerons son fonctionnement et examinerons des exemples pratiques pour mieux comprendre son pouvoir.

Qu'est-ce que l'héritage prototypique ?

L'héritage prototypique permet aux objets JavaScript de partager des propriétés et des méthodes via une chaîne de prototypes. Chaque objet JavaScript possède un lien interne vers un autre objet appelé son prototype. Si une propriété ou une méthode n'est pas trouvée sur l'objet lui-même, JavaScript la recherche dans la chaîne de prototypes.

Ce mécanisme permet aux objets « d'hériter » du comportement d'autres objets, ce qui en fait la pierre angulaire des fonctionnalités orientées objet de JavaScript.

Termes clés

1.Prototype :
L'objet dont un autre objet hérite des propriétés.

2.proto:
La référence interne (ou lien) vers le prototype d'un objet.

3.Object.prototype :
Le prototype de niveau supérieur dont tous les objets JavaScript héritent indirectement.

4.Chaîne prototype :
La hiérarchie des prototypes que JavaScript parcourt pour trouver une propriété ou une méthode.

Comment fonctionne l'héritage prototypique ?

Voici un exemple pour illustrer l'héritage prototypique en action :

// Define a base object
const animal = {
  eats: true,
  walk() {
    console.log("Animal walks");
  },
};

// Create a new object that inherits from 'animal'
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // true (inherited from animal)
dog.walk(); // "Animal walks" (method inherited from animal)

console.log(dog.barks); // true (own property)

Explication

1. L'objet chien hérite des propriétés et des méthodes de l'objet animal en utilisant la méthode Object.create().
2. Lors de l'accès à dog.eats, JavaScript vérifie d'abord si la propriété eats existe directement sur dog. Sinon, il recherche la propriété dans le prototype animal.

Création de prototypes

Utilisation de la méthode Object.create()

Object.create() est le moyen le plus simple de configurer l'héritage prototypique.

const vehicle = {
  wheels: 4,
  drive() {
    console.log("Vehicle drives");
  },
};

const car = Object.create(vehicle);
console.log(car.wheels); // 4
car.drive(); // "Vehicle drives"

Utilisation des fonctions constructeur

Avant l'introduction des classes ES6, les fonctions de constructeur constituaient le principal moyen de créer des objets avec héritage.

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function () {
  console.log(`Hello, my name is ${this.name}`);
};

const john = new Person("John");
john.greet(); // "Hello, my name is John"

Ici, le constructeur Person configure le prototype en utilisant Person.prototype. Les objets créés via new Person() héritent des méthodes définies sur Person.prototype.

Utiliser les classes ES6

Avec ES6, la syntaxe de classe a été introduite, rendant l'héritage plus intuitif tout en exploitant la chaîne de prototypes sous le capot.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // "Buddy barks"

Même si cela ressemble à un héritage classique, il est toujours basé sur l'héritage prototypique de JavaScript.

Chaîne prototype en action

Visualisons comment fonctionne la chaîne prototype :

// Define a base object
const animal = {
  eats: true,
  walk() {
    console.log("Animal walks");
  },
};

// Create a new object that inherits from 'animal'
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // true (inherited from animal)
dog.walk(); // "Animal walks" (method inherited from animal)

console.log(dog.barks); // true (own property)

Chaîne prototype :

• objet enfant : sayHi()
• objet parent (prototype) : greet()
• Object.prototype (prototype de base) : méthodes comme toString()

Si une méthode ou une propriété n'est trouvée dans aucun d'entre eux, JavaScript renvoie undefined.

Avantages de l'héritage prototypique

1.Efficacité de la mémoire :
Les méthodes et propriétés partagées sont stockées sur le prototype et non dupliquées entre les instances.

2.Héritage dynamique :
Vous pouvez modifier le prototype au moment de l'exécution et tous les objets héritants refléteront le changement.

3.Structure flexible :
Les objets peuvent hériter directement d'autres objets sans avoir besoin de hiérarchies de classes rigides.

Limitations

1. Performances de la chaîne prototype :
Les longues chaînes de prototypes peuvent ralentir les recherches de propriétés.

2.Confusion pour les débutants :
Comprendre proto, prototype et Object.create() peut être écrasant.

3.Manque de champs privés :
Avant ES6, les propriétés privées étaient difficiles à mettre en œuvre à l'aide de prototypes.

Conclusion

L'héritage prototypique est la pierre angulaire du modèle POO de JavaScript, offrant flexibilité et comportement dynamique. Que vous utilisiez Object.create(), des fonctions de constructeur ou des classes ES6, comprendre la chaîne de prototypes est essentiel pour écrire du code JavaScript efficace et efficient.

Grâce à ces connaissances, vous pouvez désormais explorer des sujets avancés tels que les mixins, la manipulation de prototypes et la différence entre l'héritage classique et prototypique.

Bon codage ! ?

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!