Maison > interface Web > js tutoriel > le corps du texte

Comment fonctionne l'héritage dans les constructeurs en JavaScript ?

WBOY
Libérer: 2023-08-21 20:33:08
avant
1350 Les gens l'ont consulté

Comment fonctionne lhéritage dans les constructeurs en JavaScript ?

Dans cet article, nous discuterons du fonctionnement de l'héritage en JavaScript et de la manière d'exploiter cette fonctionnalité de programmation orientée objet dans le constructeur de JavaScript.

Nous donnerons également une brève introduction aux objets prototypes en JavaScript. Une compréhension préalable de cela serait donc très appréciée.

En JavaScript, l'héritage est un mécanisme par lequel un objet hérite des propriétés et des méthodes d'un autre objet. Ceci peut être réalisé en utilisant des constructeurs et des propriétés de prototype.

Lors de la création d'un constructeur, vous pouvez utiliser les propriétés du prototype pour ajouter des propriétés et des méthodes à l'objet prototype du constructeur. Tous les objets créés à l'aide du constructeur héritent alors de ces propriétés et méthodes.

Exemple

Comprenons-le à travers l'exemple suivant :

function Person(name, age) {
   this.name = name;
   this.age = age;
}
Person.prototype.getName = function() {
   return this.name;
};
Copier après la connexion

Dans cet exemple, le constructeur Person a des propriétés name et age et une méthode getName. Tout objet créé à l'aide du constructeur Person hérite de ces propriétés et méthodes du prototype.

Vous pouvez également créer un nouveau constructeur qui hérite d'un constructeur existant en appelant le constructeur parent à l'aide de la méthode call ou apply et en le passant comme premier argument.

Exemple

Voici un exemple complet d'héritage fonctionnant en JavaScript :

// Parent constructor function
function Person(name, age) {
   this.name = name;
   this.age = age;
}
// Adding a method to the prototype
Person.prototype.getName = function() {
   return this.name;
};
// Child constructor function
function Employee(name, age, company) {
   
   // Calling the parent constructor function
   Person.call(this, name, age);
   this.company = company;
}
// Setting the prototype of the child constructor function
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

// Adding a method to the child constructor function
Employee.prototype.getCompany = function() {
   return this.company;
};
const employee1 = new Employee("John", 25, "Google");
console.log(employee1.name); // "John"
console.log(employee1.age); // 25
console.log(employee1.getName()); // "John"
console.log(employee1.getCompany()); // "Google"
Copier après la connexion

Dans cet exemple, nous avons un constructeur parent appelé Person, qui accepte un nom et des paramètres d'âge, et il a une méthode appelée getName(), qui est ajoutée au prototype du constructeur Person. Ensuite, nous avons un constructeur enfant appelé Employee qui hérite des propriétés et méthodes du constructeur Person. Le constructeur Employee accepte un paramètre company supplémentaire et possède une méthode appelée getCompany(), qui est ajoutée au prototype du constructeur Employee.

Ainsi, en JavaScript, un constructeur peut être utilisé pour créer un objet qui hérite des propriétés et des méthodes d'un objet parent, soit en ajoutant des propriétés et des méthodes à l'objet prototype du constructeur, soit en en créant un nouveau qui hérite d'un constructeur existant. constructeur à implémenter.

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!

source:tutorialspoint.com
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal