Javascript POO partie II

Salut les amis, je suis Bennison, dans ce blog, je vais expliquer comment la POO fonctionne en Javascript et expliquer en quoi elle diffère de la POO classique. Avant de lire cet article, veuillez lire mon blog précédent qui traite des fondamentaux de la POO .

Qu'est-ce qu'un prototype ?

En Javascript, nous avons quelque chose appelé un prototype, En JavaScript, chaque objet sera lié à un certain prototype. Ainsi, chaque objet a des prototypes. le prototype contient également des propriétés et des méthodes.
Ici, l'important est que les méthodes prototypes et les propriétés soient accessibles par l'objet.

POO classique vs Javascript POO

Dans la POO classique, un objet est instancié à partir de la classe, appelée instanciation. Ici, la classe n'est qu'un plan pour créer des objets.
Mais en Javascript, cette terminologie est juste différente. Ici, chaque objet est lié à d'autres objets , et ces objets sont appelés prototypes .

L'héritage prototype signifie un prototype qui contient des méthodes et des prototypes accessibles à tous les objets liés à ce prototype.
Ainsi, l'objet hérite des méthodes et des propriétés du prototype, c'est ainsi qu'on l'appelle l'héritage prototypique. cet héritage est différent de l'héritage de classe qui est une classe héritée de l'autre classe. Mais dans ce cas, instance héritant de la classe de base.
Dans l'image ci-dessus, dans la flèche javascript OOP pointe vers le haut, cela signifie que l'objet délègue ses comportements aux prototypes.
Dans la POO classique, les méthodes sont copiées de la classe vers les instances (objets).

const numbers = [1, 2, 3, 4,5];
numbers.map((num) => num * 2)

Si nous parcourons Google pour comprendre la méthode de mappage javascript, dans le document MDN, nous pouvons voir cela comme Array.prototype.map ()

Ici, le « Array.prototype() » est le prototype de tous les objets de tableau que nous créons en JavaScript. Par conséquent, tous les tableaux ont accès à la méthode map.
Maintenant, cet objet prototype contient toutes les méthodes de tableau, y compris une carte.

Ainsi, dans l'exemple ci-dessus, " Array.Prototype" est le prototype du tableau de nombres, cette variable de tableau de nombres est liée aux prototypes. Il a donc accès à toutes les méthodes qui sont définies sur l'objet « array.prototype ». Ainsi, dans l'exemple ci-dessus, le tableau "number" hérite de la méthode map.
En Javascript, nous pouvons implémenter l'héritage prototype de trois manières, l'une est la fonction constructeur, la seconde est les classes ES6 et la dernière est la méthode Object.Create().

Une fonction constructeur est utilisée pour créer des objets à partir de fonctions. c'est ainsi que les objets intégrés tels que les méthodes Array et map sont implémentés.

Il s'agit d'une alternative moderne aux fonctions constructeur. Les classes ES6 fonctionnent de la même manière que la fonction constructeur. La classe ES6 ne se comporte pas comme une POO classique. Dans les coulisses, les classes ES6 sont implémentées avec des fonctions Constructor.

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  getFullName() {
    console.log(this.firstName + ' ' + this.lastName);
  }
}

const user = new User('Bennison', 'J');

console.log(user); // { firstName: 'Bennison', lastName: 'J' }

console.log(user.hasOwnProperty('firstName')); // true
console.log(user.hasOwnProperty('getFullName')); // false

Et l'exemple ci-dessus, nous pouvons voir la méthode 'hasOwnProperty', qui nous aide à vérifier la propriété, et la méthode est la propriété propre de l'objet qui s'appelle la méthode hasOwnProperty.

La méthode "object.create()" est le moyen le plus simple de lier un objet à un objet prototype.

const objOne = {
  firstName: 'Bennison',
  lastName: 'J',
  getFullName: function () {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

const objTwo = Object.create(objOne);

console.log(objTwo); // {}
objTwo.getFullName(); //  Bennison J

La méthode "Object.create" renvoie un objet vide avec le prototype. et le prototype sera ce que nous avons passé à cette méthode.

J'espère que, dans ce blog, nous avons appris les bases de l'héritage prototypique en Javascript, si vous ne pouviez pas comprendre les exemples ci-dessus, ne vous inquiétez pas, j'expliquerai plus sur ces concepts dans mes prochains blogs. Merci d'avoir lu ce blog, à bientôt.

JavaScript POO (Prototype) #2