Prototype JavaScript

Avant d’apprendre les prototypes, assurez-vous de consulter ces tutoriels :

• Objets JavaScript
• Fonction constructrice JavaScript

Comme vous le savez, vous pouvez créer un objet en JavaScript en utilisant une fonction constructrice d’objet. Par exemple,

// constructor functionfunction Person () { this.name = 'John', this.age = 23}// creating objectsconst person1 = new Person();const person2 = new Person();

Dans l’exemple ci-dessus, function Person() est une fonction constructeur d’objet. Nous avons créé deux objets person1 et person2 à partir de celle-ci.

JavaScript Prototype

En JavaScript, chaque fonction et chaque objet possède 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 valueconsole.log(Person.prototype); // { ... }

Dans l’exemple ci-dessus, nous essayons d’accéder à la propriété prototype d’une Person fonction constructrice.

Puisque la propriété prototype n’a pas de valeur pour le moment, elle affiche un objet vide {…. }.

Héritage du 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 functionfunction Person () { this.name = 'John', this.age = 23}// creating objectsconst person1 = new Person();const person2 = new Person();// adding property to constructor functionPerson.prototype.gender = 'male';// prototype value of Personconsole.log(Person.prototype);// inheriting the property from prototypeconsole.log(person1.gender);console.log(person2.gender);

Sortie

{ gender: "male" }malemale

Dans le programme ci-dessus, nous avons ajouté une nouvelle propriété gender à la fonction constructeur Person en utilisant :

Person.prototype.gender = 'male';

Dès lors, l’objet person1 et person2 héritent de la propriété gender de la propriété prototype de la fonction constructeur Person.

Hence, les deux objets person1 et person2 peuvent accéder à la propriété gender.

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 en utilisant le prototype

Vous pouvez également ajouter de nouvelles méthodes à une fonction constructeur en utilisant le prototype. Par exemple,

// constructor functionfunction Person () { this.name = 'John', this.age = 23}// creating objectsconst person1 = new Person();const person2 = new Person();// adding a method to the constructor functionPerson.prototype.greet = function() { console.log('hello' + ' ' + this.name);}person1.greet(); // hello Johnperson2.greet(); // hello John

Dans le programme ci-dessus, une nouvelle méthode greet est ajoutée à la fonction constructeur Person en utilisant un prototype.

Modification du prototype

Si la valeur d’un prototype est modifiée, alors tous les nouveaux objets auront la valeur de la propriété modifiée. Tous les objets précédemment créés auront la valeur précédente. Par exemple,

// constructor functionfunction Person() { this.name = 'John'}// add a propertyPerson.prototype.age = 20;// creating an objectconst person1 = new Person();console.log(person1.age); // 20// changing the property value of prototypePerson.prototype = { age: 50 }// creating new objectconst person3 = new Person();console.log(person3.age); // 50console.log(person1.age); // 20

Note : Vous ne devez pas modifier les prototypes des objets intégrés standard de JavaScript comme les chaînes, les tableaux, etc. C’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 = 23const person1 = new Person();console.log(person1.name); // Johnconsole.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.name regarde dans la fonction constructeur pour voir s’il existe une propriété nommée name. Comme la fonction constructeur possède la propriété name avec la valeur 'John', l’objet prend la valeur de cette propriété.

Lorsque le programme s’exécute, person1.age regarde dans la fonction constructeur s’il existe une propriété nommée age. Comme la fonction constructeur n’a pas la propriété age, 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).

Note : Vous pouvez également accéder à la propriété prototype d’une fonction constructeur à partir d’un objet.

function Person () { this.name = 'John'}// adding a prototypePerson.prototype.age = 24;// creating objectconst person = new Person();// accessing prototype propertyconsole.log(person.__proto__); // { age: 24 }

Dans l’exemple ci-dessus, un objet person est utilisé pour accéder à la propriété prototype à l’aide de __proto__. Cependant, __proto__ a été déprécié et vous devriez éviter de l’utiliser.