O Prototype Design Pattern em JavaScript é um padrão de criação que permite criar novos objetos clonando um objeto existente (o "protótipo") em vez de criá-los do zero, o que serve como um protótipo. Esse padrão é particularmente adequado para JavaScript, pois o próprio JavaScript é uma linguagem baseada em protótipo e é útil quando a criação de objetos é cara ou quando você deseja criar um objeto que compartilhe certas propriedades com um protótipo base.

ES6 facilitam a compreensão da estrutura dos objetos. O uso de extensões simplifica a herança, mas antes do ES6, o protótipo era usado para herdar e implementar isso. Aqui está o blog para entender esse conceito.

Ps: No Prototype Design Pattern em JavaScript, não existe um método clone() integrado como existe em algumas outras linguagens (por exemplo, Java). No entanto, você pode implementar manualmente um método clone() em seu protótipo ou função construtora para fornecer funcionalidade semelhante.

A ideia por trás do padrão Prototype é:

1. Crie um objeto que atue como um protótipo (blueprint).
2. Use esse objeto para criar novas instâncias, seja copiando-o ou vinculando novas instâncias ao protótipo.

Conceitos-chave do padrão de protótipo

Protótipo: um objeto modelo a partir do qual novos objetos são criados.
Clonagem: Novos objetos são criados copiando o protótipo.
Cadeia de protótipos: objetos podem delegar comportamento ao seu protótipo

Parte 1: A classe de forma básica

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
  }
}

Explicação:

Propósito: A classe Shape atua como uma classe base ou "protótipo" da qual formas específicas como círculos ou retângulos podem herdar.

clone(): Esta é uma parte fundamental do Padrão de Protótipo. Em vez de criar uma nova instância de uma classe do zero, criamos um clone da instância existente (ou "protótipo"). Neste caso, Object.create(this) cria um novo objeto que compartilha o mesmo protótipo do Shape original.

Parte 2: A Aula Círculo

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;
  }
}

Explicação:
Objetivo: A classe Circle estende a classe Shape e representa um tipo específico de forma.

Atributos:

• raio: O raio do círculo.
• No construtor, a função super() chama o construtor do Classe de forma, passando "Círculo" como o tipo de forma e a cor.

getArea(): Calcula a área do círculo usando a fórmula π * raio ^ 2.

Parte 3: A Classe Retângulo

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;
  }
}

Explicação:

Purpose: A classe Rectangle estende a classe Shape e representa outro tipo específico de forma (um retângulo).

• Como a classe Circle, a classe Rectangle usa super() para chamar o construtor Shape da classe pai, especificando que este é um "Retângulo".
Método
• getArea(): calcula a área do retângulo usando a fórmula largura * altura

Parte 4: Clonagem e Uso do Protótipo

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';

Explicação:

Aqui, em vez de criar objetos myCircle e myRectangle do zero usando a palavra-chave new, estamos clonando protótipos.

Processo de clonagem:

• Primeiro, criamos instâncias de protótipo (circlePrototype e retânguloPrototype).
• Em seguida, clonamos esses protótipos usando o método clone(), que cria novos objetos que herdam do objeto protótipo.

Modificando instâncias clonadas:

• Após a clonagem, modificamos as propriedades (por exemplo, raio, largura, altura, cor) dos objetos clonados (myCircle e myRectangle) para atender às nossas necessidades.
• Isso nos permite criar facilmente vários objetos a partir de um protótipo base, modificando apenas as propriedades necessárias.

Parte 5: Saída

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

Explicação:

• Usamos o método getDetails() herdado da classe Shape para imprimir os detalhes (tipo e cor) de myCircle e myRectangle.
• Também usamos os métodos getArea() (específicos das classes Circle e Rectangle) para calcular e exibir a área de cada forma.

Perspectiva do padrão de design do protótipo:

• Criação de protótipo: Em vez de criar novos objetos de Círculo e Retângulo do zero, primeiro criamos uma instância de protótipo (circlePrototype e retânguloPrototype).
• Clonagem: Uma vez que o protótipo existe, o método clone() é usado para criar novos objetos baseados no protótipo. Esta é a essência do Prototype Pattern: criar objetos copiando um objeto existente (o protótipo).

Caso de uso:

O padrão Prototype é útil quando:

• Você precisa criar novos objetos clonando objetos existentes.
• Você deseja evitar subclasses e reutilizar diretamente objetos existentes como projetos.
A criação
• é cara ou complexa e quando muitos objetos semelhantes precisam ser criados. Ao usar protótipos, você pode agilizar o processo e melhorar a eficiência.

Se você chegou até aqui ?✨, deixe um comentário abaixo com qualquer dúvida ou opinião. Eu adoraria ouvir sua opinião e participar de ótimas discussões!✨