Qu’est-ce que les prototypes JavaScript ? bobbyhadz

Les classes en JS #

ES2015 classes en JavaScript sont juste sucre syntaxiqueils n’existent pas vraiment
existent pas vraiment.

Des classes ont été ajoutées à faciliter le travail avec l’héritage pour
programmeurs qui étaient habitués à travailler avec des classes avec l’approche traditionnelle de la POO
traditionnelle.

Lorsque nous utilisons un Classe ES2015il suffit de utilise le système prototype derrière
les coulisses – même si nous utilisons la syntaxe de classe, nous utilisons toujours l’héritage
l’héritage prototypique.

Disons que nous avons la classe suivante :

class Employee {
  constructor(title) {
    this.title = title;
  }
  work() {
    console.log(`The ${this.title} is working.`);
  }
}

Le code réel qui sera exécuté sera la fonction constructeur suivante :

function Employee(title) {
  this.title = title;
}

Employee.prototype.work = function () {
  console.log(`The ${this.title} is working.`);
};

Nous pourrions ensuite utiliser cette fonction constructrice pour initialiser/utiliser les différentes
propriétés/méthodes que nous voulons qu’un employé ait :

const employee = new Employee('programmer');
employee.work();

Propriété prototype #

A l’intérieur de la fonction constructeur, nous n’associons généralement que les propriétés
que nous voulons qu’un objet ait, parce que les propriétés seront le plus souvent
uniques entre les différentes instances que nous créons.

Quand il s’agit de méthodes, nous les plaçons dans la section prototype parce que les
car les méthodes sont le plus souvent les mêmes entre les instances, et ce serait un
ressources de dupliquer ces méthodes sur chaque instance que nous créons.

La solution utilisée dans le langage javascript est de déléguer les méthodes à l’instance de l’utilisateur.
prototype objet.

Si vous deviez console.log le site employee instance que nous avons créée ci-dessus, vous
vous verriez quelque chose comme :

{
  title: 'programmer',
  __proto__: {
    work: () => {},
    ...
  }
}

Donc nous ne voyons pas le prototype sur l’instance mais nous voyons une
__proto__ qui a accès à la propriété work méthode.

Alors comment __proto__ est lié à prototype?

• __proto__ est l’objet réel qui est utilisé dans la chaîne de recherche pour résoudre les
  méthodes. Lorsque nous essayons d’accéder à une méthode comme work directement sur l’instance
  employee – javascript recherche d’abord le work directement sur l’instance
  et, s’il ne la trouve pas, il recherche la méthode work sur l’instance
  __proto__ objet.

• prototype est l’objet qui est utilisé pour construire __proto__ lorsque nous créons un objet
  avec l’objet new mot-clé. Nous avons assigné le work à la méthode
  prototype qui est ensuite utilisée pour construire __proto__ qui est utilisé par
  les instances pour rechercher des méthodes, lorsqu’elles ne sont pas trouvées directement sur l’instance.
  l’instance.

Un autre avantage de cette approche de délégation est que l’on peut attacher des méthodes à l’élément
prototype de la classe après avoir créé une instance, et toujours utiliser cette méthode sur l’instance.
sur l’instance – parce que javascript va d’abord chercher la méthode sur l’instance et
méthode sur l’instance et s’il ne la trouve pas, il cherchera sur le
prototype.

function Employee(title) {
  this.title = title;
}

Employee.prototype.work = function () {
  console.log(`The ${this.title} is working.`);
};

const employee = new Employee('programmer');

Employee.prototype.drinkCoffee = function () {
  console.log(`The ${this.title} drinks coffee`);
};


employee.drinkCoffee();

Nous pouvons revenir sur un prototype et ajouter, mettre à jour ou supprimer des méthodes, et ensuite
elles seront répercutées sur toutes les instances créées à partir de cette fonction constructeur
fonction.

Résumé #

Lorsque l’on utilise des classes en javascript, on utilise toujours l’attribut prototype chaque classe
classe se traduit par une fonction de construction avec un prototype qui stocke toutes les
différentes méthodes associées à la classe.