Le modèle de conception de prototype en JavaScript est un modèle de création qui vous permet de créer de nouveaux objets en clonant un objet existant (le « prototype ») au lieu de les créer à partir de zéro, ce qui sert de un prototype. Ce modèle est particulièrement bien adapté à JavaScript, car JavaScript lui-même est un langage basé sur un prototype et est utile lorsque la création d'objets est coûteuse ou lorsque vous souhaitez créer un objet partageant certaines propriétés avec un prototype de base.

Les classes ES6 facilitent la compréhension de la structure des objets. L'utilisation d' extends simplifie l'héritage, mais avant ES6, un prototype était utilisé pour hériter et l'implémenter. Voici un blog pour comprendre ce concept.

Ps : dans le modèle de conception de prototype en JavaScript, il n'y a pas de méthode clone() intégrée comme c'est le cas dans certains autres langages (par exemple Java). Cependant, vous pouvez implémenter manuellement une méthode clone() dans votre prototype ou votre fonction constructeur pour fournir des fonctionnalités similaires.

L'idée derrière le modèle Prototype est de :

1. Créez un objet qui fait office de prototype (plan).
2. Utilisez cet objet pour créer de nouvelles instances, soit en le copiant, soit en liant de nouvelles instances au prototype.

Concepts clés du modèle de prototype

Prototype : un objet modèle à partir duquel de nouveaux objets sont créés.
Clonage : de nouveaux objets sont créés en copiant le prototype.
Chaîne de prototypes : les objets peuvent déléguer un comportement à leur prototype

Partie 1 : La classe de forme de base

class Shape {
  constructor(type = 'Generic Shape', color = 'White') {
    this.type = type;
    this.color = color;
  }

  getDetails() {
    return `Type: ${this.type}, Color: ${this.color}`;
  }

  // Clone method to create a new object with the same prototype
  clone() {
    return Object.create(this);  // Creates a new object that inherits from this prototype
  }
}

Explication:

Objectif : la classe Shape agit comme une classe de base ou un "prototype" dont des formes spécifiques telles que des cercles ou des rectangles peuvent hériter.

clone() : il s’agit d’un élément clé du modèle de prototype. Au lieu de créer une nouvelle instance d'une classe à partir de zéro, nous créons un clone de l'instance existante (ou « prototype »). Dans ce cas, Object.create(this) crée un nouvel objet qui partage le même prototype que la forme d'origine.

Partie 2 : La classe en cercle

class Circle extends Shape {
  constructor(radius = 0, color = 'White') {
    super('Circle', color); // Calls the parent (Shape) constructor
    this.radius = radius;
  }

  getArea() {
    return Math.PI * this.radius * this.radius;
  }
}

Explication:
Objectif : La classe Circle étend la classe Shape et représente un type spécifique de forme.

Attributs :

• radius : Le rayon du cercle.
• Dans le constructeur, la fonction super() appelle le constructeur du Classe de forme, en passant "Cercle" comme type de forme et couleur.

getArea() : Ceci calcule l'aire du cercle à l'aide de la formule π * rayon^2.

Partie 3 : La classe Rectangle

class Rectangle extends Shape {
  constructor(width = 0, height = 0, color = 'White') {
    super('Rectangle', color);  // Calls the parent (Shape) constructor
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

Explication:

Objectif : La classe Rectangle étend la classe Shape et représente un autre type spécifique de forme (un rectangle).

• Comme la classe Circle, la classe Rectangle utilise super() pour appeler le constructeur Shape de la classe parent, en spécifiant qu'il s'agit d'un "Rectangle".
Méthode
• getArea() : Ceci calcule l'aire du rectangle en utilisant la formule largeur * hauteur

Partie 4 : Clonage et utilisation du prototype

const circlePrototype = new Circle();  // Create prototype
const myCircle = circlePrototype.clone();  // Clone the prototype
myCircle.radius = 5;
myCircle.color = 'Red';

const rectanglePrototype = new Rectangle();  // Create prototype
const myRectangle = rectanglePrototype.clone();  // Clone the prototype
myRectangle.width = 10;
myRectangle.height = 5;
myRectangle.color = 'Blue';

Explication:

Ici, au lieu de créer des objets myCircle et myRectangle à partir de zéro à l'aide du nouveau mot-clé, nous clonons des prototypes.

Processus de clonage :

• Tout d'abord, nous créons des instances de prototype (circlePrototype et rectanglePrototype).
• Ensuite, nous clonons ces prototypes à l'aide de la méthode clone(), qui crée de nouveaux objets qui héritent de l'objet prototype.

Modification des instances clonées :

• Après le clonage, nous modifions les propriétés (par exemple, rayon, largeur, hauteur, couleur) des objets clonés (myCircle et myRectangle) pour répondre à nos besoins.
• Cela nous permet de créer facilement plusieurs objets à partir d'un prototype de base, en modifiant uniquement les propriétés nécessaires.

Partie 5 : Sortie

console.log(myCircle.getDetails()); // Output: Type: Circle, Color: Red
console.log(`Circle Area: ${myCircle.getArea()}`);  // Output: Circle Area: 78.54

console.log(myRectangle.getDetails()); // Output: Type: Rectangle, Color: Blue
console.log(`Rectangle Area: ${myRectangle.getArea()}`);  // Output: Rectangle Area: 50

Explication:

• Nous utilisons la méthode getDetails() héritée de la classe Shape pour imprimer les détails (type et couleur) de myCircle et myRectangle.
• Nous utilisons également les méthodes getArea() (spécifiques aux classes Circle et Rectangle) pour calculer et afficher l'aire de chaque forme.

Perspective du modèle de conception de prototype :

• Création de prototype : au lieu de créer de nouveaux objets de cercle et de rectangle à partir de zéro, nous créons d'abord une instance de prototype (circlePrototype et rectanglePrototype).
• Clonage : Une fois le prototype existant, la méthode clone() est utilisée pour créer de nouveaux objets basés sur le prototype. C'est l'essence du Prototype Pattern : créer des objets en copiant un objet existant (le prototype).

Cas d'utilisation :

Le modèle Prototype est utile lorsque :

• Vous devez créer de nouveaux objets en clonant des objets existants.
• Vous souhaitez éviter le sous-classement et réutiliser directement les objets existants comme plans.
• la création est coûteuse ou complexe et lorsque de nombreux objets similaires doivent être créés. En utilisant des prototypes, vous pouvez rationaliser le processus et améliorer l'efficacité.

Si vous êtes arrivé jusqu'ici ?✨, déposez un commentaire ci-dessous avec des questions ou des réflexions. J'aimerais avoir de vos nouvelles et participer à de bonnes discussions !✨