Maison >interface Web >js tutoriel >La chaîne de prototypes en JavaScript : comprendre l'héritage et la recherche d'objets

La chaîne de prototypes en JavaScript : comprendre l'héritage et la recherche d'objets

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-22 20:49:11687parcourir

The Prototype Chain in JavaScript: Understanding Inheritance and Object Lookup

La chaîne de prototypes en JavaScript

La chaîne de prototypes est un concept fondamental dans le modèle d'héritage de JavaScript. Il permet aux objets d'hériter des propriétés et des méthodes d'autres objets, et c'est le mécanisme clé du fonctionnement de l'héritage en JavaScript.

Comment fonctionne la chaîne de prototypes

Lorsque vous créez un objet en JavaScript, il est lié à un autre objet qui lui sert de prototype. Chaque objet possède une propriété interne cachée, [[Prototype]], qui fait référence à l'objet prototype.

Lorsque vous accédez à une propriété ou une méthode sur un objet, JavaScript vérifie d'abord si la propriété existe sur cet objet. Sinon, JavaScript recherchera la chaîne jusqu'au prototype de l'objet, puis jusqu'au prototype de ce prototype, et ainsi de suite, jusqu'à ce qu'elle atteigne Object.prototype (la racine de la chaîne de prototypes). Si la propriété ou la méthode n'est trouvée à aucun niveau de la chaîne, JavaScript renverra undéfini.

Exemple de chaîne prototype

// Constructor function for Animal
function Animal(name) {
    this.name = name;
}

// Adding a method to Animal's prototype
Animal.prototype.speak = function() {
    console.log(this.name + " makes a noise.");
};

// Constructor function for Dog
function Dog(name) {
    Animal.call(this, name); // Inherit properties from Animal
}

// Set up the prototype chain so Dog inherits from Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // Reset the constructor reference

// Create an instance of Dog
const dog = new Dog("Buddy");
dog.speak();  // Output: "Buddy makes a noise."

Dans cet exemple :

  • L'objet Chien hérite du prototype Animal via la chaîne de prototypes.
  • Lorsque vous appelez dog.speak(), JavaScript recherche d'abord la méthode speak sur l'objet dog. S'il n'y est pas trouvé, il vérifie Dog.prototype, et enfin Animal.prototype.
  • Puisque le langage existe dans Animal.prototype, il est trouvé et exécuté.

La chaîne de prototypes et Object.prototype

Chaque objet en JavaScript hérite en fin de compte d'Object.prototype, qui est l'objet prototype le plus élevé de la chaîne de prototypes. Cela signifie que tous les objets, y compris les instances d'objets intégrés tels que les tableaux, les fonctions et les objets définis par l'utilisateur, auront accès aux méthodes et propriétés définies sur Object.prototype.

const obj = {};
console.log(obj.toString()); // Output: "[object Object]"
// The toString method is inherited from Object.prototype

Processus de recherche de chaîne de prototypes

  1. Tout d'abord, JavaScript recherche la propriété ou la méthode sur l'objet lui-même.
  2. Ensuite, si la propriété n'est pas trouvée, JavaScript examine le prototype de l'objet.
  3. Ensuite, il vérifie le prototype du prototype et continue de remonter la chaîne jusqu'à ce qu'il atteigne Object.prototype.
  4. Si la propriété n'est pas trouvée même dans Object.prototype, undefined est renvoyé.

Visualiser la chaîne de prototypes

Considérons l'exemple suivant :

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

Person.prototype.sayHello = function() {
    console.log("Hello, " + this.name);
};

const john = new Person("John");

console.log(john.sayHello());  // Output: "Hello, John"
console.log(john.toString());  // Output: "[object Object]"

Dans ce cas, la chaîne prototype pour John ressemble à ceci :

// Constructor function for Animal
function Animal(name) {
    this.name = name;
}

// Adding a method to Animal's prototype
Animal.prototype.speak = function() {
    console.log(this.name + " makes a noise.");
};

// Constructor function for Dog
function Dog(name) {
    Animal.call(this, name); // Inherit properties from Animal
}

// Set up the prototype chain so Dog inherits from Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // Reset the constructor reference

// Create an instance of Dog
const dog = new Dog("Buddy");
dog.speak();  // Output: "Buddy makes a noise."
  • John n'a pas directement la méthode toString, donc JavaScript regarde Person.prototype, et s'il n'y est pas trouvé, il vérifie Object.prototype.
  • Enfin, s'il n'est pas trouvé dans Object.prototype, il renvoie undéfini.

Conclusion

La chaîne de prototypes en JavaScript offre de puissantes capacités d'héritage, permettant aux objets d'hériter des propriétés et des méthodes d'autres objets. Comprendre le fonctionnement de la chaîne de prototypes est crucial pour maîtriser JavaScript et créer un code orienté objet plus efficace.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn