Comprendre les prototypes JavaScript : un guide complet sur l'héritage et le partage de méthodes

Prototypes JavaScript

En JavaScript, un prototype est un objet qui sert de modèle à d'autres objets. Chaque objet en JavaScript possède un prototype, et le prototype lui-même est un objet qui contient des propriétés et des méthodes partagées par toutes les instances de l'objet. Ce concept est au cœur du mécanisme d'héritage de JavaScript.

1. Qu'est-ce qu'un prototype ?

Chaque objet JavaScript possède une propriété interne appelée [[Prototype]]. Cette propriété fait référence à un autre objet dont elle hérite des propriétés et des méthodes. Le prototype d'un objet est accessible à l'aide de la propriété __proto__ (dans la plupart des navigateurs) ou Object.getPrototypeOf().

Par exemple, lorsque vous créez un nouvel objet, il hérite des propriétés et des méthodes de l'objet prototype de son constructeur.

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

// Adding a method to the prototype of Person
Person.prototype.greet = function() {
    console.log("Hello, " + this.name);
};

const person1 = new Person("John", 30);
person1.greet();  // Output: "Hello, John"

2. Chaîne prototype

En JavaScript, les objets sont liés entre eux dans une chaîne de prototypes. Lorsqu'une propriété ou une méthode est appelée sur un objet, JavaScript vérifie d'abord si cette propriété ou cette méthode existe sur l'objet lui-même. Si ce n’est pas le cas, JavaScript vérifie le prototype de l’objet. S'il n'y est pas trouvé, JavaScript continue de vérifier la chaîne de prototypes jusqu'à ce qu'elle atteigne Object.prototype, qui est l'objet prototype racine. Si la propriété ou la méthode n'est toujours pas trouvée, undefined est renvoyé.

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

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

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

Dog.prototype = Object.create(Animal.prototype);  // Set the prototype chain
Dog.prototype.constructor = Dog;  // Fix the constructor reference

const dog1 = new Dog("Buddy");
dog1.speak();  // Output: "Buddy makes a noise."

3. Ajout de méthodes aux prototypes

Des méthodes peuvent être ajoutées au prototype d'une fonction constructeur, ce qui rend les méthodes accessibles à toutes les instances créées par ce constructeur. C'est un moyen plus efficace de définir des méthodes partagées, plutôt que de les ajouter directement à chaque instance.

function Car(make, model) {
    this.make = make;
    this.model = model;
}

// Adding a method to the prototype
Car.prototype.displayInfo = function() {
    console.log(this.make + " " + this.model);
};

const car1 = new Car("Toyota", "Corolla");
car1.displayInfo();  // Output: "Toyota Corolla"

4. Relation constructeur et prototype

L'objet prototype est étroitement lié à la fonction constructeur. Lorsque vous utilisez le mot-clé new pour créer une instance d'un objet, JavaScript définit le [[Prototype]] de cette instance sur le prototype de la fonction constructeur.

function Student(name, grade) {
    this.name = name;
    this.grade = grade;
}

Student.prototype.study = function() {
    console.log(this.name + " is studying.");
};

const student1 = new Student("Alice", "A");
console.log(student1.__proto__ === Student.prototype);  // true

5. Héritage des prototypes

L'héritage de prototype permet à un objet d'hériter des propriétés et des méthodes d'un autre. Il s'agit d'une forme d'héritage orienté objet en JavaScript. En définissant le prototype d'un objet sur le prototype d'un autre objet, le premier objet peut accéder aux propriétés et méthodes du second.

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

// Adding a method to the prototype of Person
Person.prototype.greet = function() {
    console.log("Hello, " + this.name);
};

const person1 = new Person("John", 30);
person1.greet();  // Output: "Hello, John"

6. Object.getPrototypeOf() et Object.setPrototypeOf()

JavaScript fournit les méthodes Object.getPrototypeOf() et Object.setPrototypeOf() pour récupérer et modifier le prototype d'un objet. Cependant, la modification du prototype au moment de l'exécution n'est pas recommandée car cela peut avoir des implications sur les performances.

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

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

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

Dog.prototype = Object.create(Animal.prototype);  // Set the prototype chain
Dog.prototype.constructor = Dog;  // Fix the constructor reference

const dog1 = new Dog("Buddy");
dog1.speak();  // Output: "Buddy makes a noise."

7. Prototype et performances

Bien que les prototypes fournissent un moyen efficace de partager des méthodes et des propriétés, la modification du prototype d'un objet après sa création peut entraîner des inconvénients en termes de performances. Il est recommandé de configurer les prototypes de manière à ne pas nécessiter de modification au moment de l'exécution.

8. Résumé des points clés

• Chaque objet a un prototype, et ce prototype peut aussi avoir un prototype, formant une chaîne de prototypes.
• Le prototype est un objet partagé dont l'objet hérite des propriétés et des méthodes.
• Vous pouvez définir des méthodes partagées dans le prototype d'une fonction constructeur.
• L'L'héritage en JavaScript est obtenu en liant le prototype d'un objet au prototype d'un autre objet.
• Object.getPrototypeOf() et Object.setPrototypeOf() vous permettent de manipuler le prototype d'un objet.

Conclusion

Les prototypes sont une fonctionnalité puissante de JavaScript qui permet un héritage et un partage de méthodes efficaces. Comprendre leur fonctionnement est crucial pour écrire du code JavaScript plus efficace et orienté objet.

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!