Dans ce didacticiel, vous découvrirez les prototypes en JavaScript à l'aide d'exemples.
Avant d'apprendre les prototypes, assurez-vous de consulter ces didacticiels:
- Objets JavaScript
- Fonction de constructeur JavaScript
Comme vous le savez, vous pouvez créer un objet en JavaScript à l'aide d'une fonction de constructeur d'objet. Par exemple,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
Dans l'exemple ci-dessus, function Person()est une fonction de constructeur d'objet. Nous avons créé deux objets person1et à person2partir de celui-ci.
Prototype JavaScript
En JavaScript, chaque fonction et objet a une propriété nommée prototype par défaut. Par exemple,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
Dans l'exemple ci-dessus, nous essayons d'accéder à la propriété prototype d'une Personfonction constructeur.
Puisque la propriété prototype n'a aucune valeur pour le moment, elle montre un objet vide (…).
Héritage de prototype
En JavaScript, un prototype peut être utilisé pour ajouter des propriétés et des méthodes à une fonction constructeur. Et les objets héritent des propriétés et des méthodes d'un prototype. Par exemple,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding property to constructor function Person.prototype.gender = 'male'; // prototype value of Person console.log(Person.prototype); // inheriting the property from prototype console.log(person1.gender); console.log(person2.gender);
Production
(sexe: "homme") homme homme
Dans le programme ci-dessus, nous avons ajouté une nouvelle propriété genderà la Personfonction constructeur en utilisant:
Person.prototype.gender = 'male';
Puis objet person1et person2hérite de la propriété genderde la propriété prototype de la Personfonction constructeur.
Par conséquent, les deux objets person1et person2peuvent accéder à la propriété de genre.
Remarque: La syntaxe pour ajouter la propriété à une fonction de constructeur d'objet est:
objectConstructorName.prototype.key = 'value';
Le prototype est utilisé pour fournir une propriété supplémentaire à tous les objets créés à partir d'une fonction constructeur.
Ajouter des méthodes à une fonction constructeur à l'aide d'un prototype
Vous pouvez également ajouter de nouvelles méthodes à une fonction constructeur à l'aide de prototype. Par exemple,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding a method to the constructor function Person.prototype.greet = function() ( console.log('hello' + ' ' + this.name); ) person1.greet(); // hello John person2.greet(); // hello John
Dans le programme ci-dessus, une nouvelle méthode greetest ajoutée à la Personfonction constructeur à l'aide d'un prototype.
Changer de prototype
Si une valeur de prototype est modifiée, tous les nouveaux objets auront la valeur de propriété modifiée. Tous les objets créés précédemment auront la valeur précédente. Par exemple,
// constructor function function Person() ( this.name = 'John' ) // add a property Person.prototype.age = 20; // creating an object const person1 = new Person(); console.log(person1.age); // 20 // changing the property value of prototype Person.prototype = ( age: 50 ) // creating new object const person3 = new Person(); console.log(person3.age); // 50 console.log(person1.age); // 20
Remarque : vous ne devez pas modifier les prototypes des objets intégrés JavaScript standard tels que les chaînes, les tableaux, etc. Cela est considéré comme une mauvaise pratique.
Chaînage de prototypes JavaScript
Si un objet tente d'accéder à la même propriété qui se trouve dans la fonction constructeur et dans l'objet prototype, l'objet prend la propriété de la fonction constructeur. Par exemple,
function Person() ( this.name = 'John' ) // adding property Person.prototype.name = 'Peter'; Person.prototype.age = 23 const person1 = new Person(); console.log(person1.name); // John console.log(person1.age); // 23
Dans le programme ci-dessus, un nom de propriété est déclaré dans la fonction constructeur et également dans la propriété prototype de la fonction constructeur.
Lorsque le programme s'exécute, person1.nameregarde dans la fonction constructeur pour voir s'il existe une propriété nommée name. Étant donné que la fonction constructeur a la propriété name avec valeur 'John', l'objet prend la valeur de cette propriété.
Lorsque le programme s'exécute, person1.ageregarde dans la fonction constructeur pour voir s'il existe une propriété nommée age. Puisque la fonction constructeur n'a pas de agepropriété, le programme regarde dans l'objet prototype de la fonction constructeur et l'objet hérite de la propriété de l'objet prototype (si disponible).
Remarque : vous pouvez également accéder à la propriété prototype d'une fonction constructeur à partir d'un objet.
function Person () ( this.name = 'John' ) // adding a prototype Person.prototype.age = 24; // creating object const person = new Person(); // accessing prototype property console.log(person.__proto__); // ( age: 24 )
Dans l'exemple ci-dessus, un personobjet est utilisé pour accéder à la propriété prototype à l'aide de __proto__. Cependant, __proto__est obsolète et vous devez éviter de l'utiliser.
