El patrón de diseño de prototipo en JavaScript es un patrón de creación que le permite crear nuevos objetos clonando un objeto existente (el "prototipo") en lugar de crearlos desde cero, lo que sirve como un prototipo. Este patrón es particularmente adecuado para JavaScript, ya que JavaScript en sí es un lenguaje basado en prototipos y es útil cuando la creación de objetos es costosa o cuando desea crear un objeto que comparte ciertas propiedades con un prototipo base.

Las clases de ES6 facilitan la comprensión de la estructura de los objetos. El uso de extensiones simplifica la herencia, pero antes de ES6, se usaba el prototipo para heredar e implementar esto. Aquí hay un blog para comprender este concepto.

Ps: en el patrón de diseño de prototipos en JavaScript, no hay un método clone() incorporado como lo hay en otros lenguajes (por ejemplo, Java). Sin embargo, puedes implementar manualmente un método clone() en tu prototipo o función constructora para proporcionar una funcionalidad similar.

La idea detrás del patrón Prototipo es:

1. Crear un objeto que actúe como prototipo (plano).
2. Utilice ese objeto para crear nuevas instancias, ya sea copiándolo o vinculando nuevas instancias al prototipo.

Conceptos clave del patrón prototipo

Prototipo: un objeto de plantilla a partir del cual se crean nuevos objetos.
Clonación: Se crean nuevos objetos copiando el prototipo.
Cadena de prototipos: los objetos pueden delegar comportamiento a su prototipo

Parte 1: La clase de forma 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
  }
}

Explicación:

Propósito: La clase Forma actúa como una clase base o "prototipo" del cual se pueden heredar formas específicas como círculos o rectángulos.

Método clon(): Esta es una parte clave del patrón de prototipo. En lugar de crear una nueva instancia de una clase desde cero, creamos un clon de la instancia existente (o "prototipo"). En este caso, Object.create(this) crea un nuevo objeto que comparte el mismo prototipo que la Forma original.

Parte 2: La clase circular

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

Explicación:
Propósito: La clase Círculo extiende la clase Forma y representa un tipo específico de forma.

Atributos:

• radio: El radio del círculo.
• En el constructor, la función super() llama al constructor del Clase de forma, pasando "Círculo" como tipo de forma y color.

getArea() Método: calcula el área del círculo usando la fórmula π * radio^2.

Parte 3: La clase rectá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;
  }
}

Explicación:

Propósito: La clase Rectángulo extiende la clase Forma y representa otro tipo específico de forma (un rectángulo).

• Al igual que la clase Círculo, la clase Rectángulo usa super() para llamar al constructor Forma de la clase principal, especificando que se trata de un "Rectángulo".
• Método getArea(): Esto calcula el área del rectángulo usando la fórmula ancho * alto

Parte 4: Clonación y uso del prototipo

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

Explicación:

Aquí, en lugar de crear objetos myCircle y myRectangle desde cero usando la nueva palabra clave, estamos clonando prototipos.

Proceso de clonación:

• Primero, creamos instancias prototipo (circlePrototype y rectánguloPrototype).
• Luego, clonamos estos prototipos usando el método clone(), que crea nuevos objetos que heredan del objeto prototipo.

Modificación de instancias clonadas:

• Después de la clonación, modificamos las propiedades (por ejemplo, radio, ancho, alto, color) de los objetos clonados (myCircle y myRectangle) para satisfacer nuestras necesidades.
• Esto nos permite crear fácilmente múltiples objetos a partir de un prototipo base, modificando solo las propiedades necesarias.

Parte 5: Salida

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

Explicación:

• Usamos el método getDetails() heredado de la clase Shape para imprimir los detalles (tipo y color) de myCircle y myRectangle.
• También utilizamos los métodos getArea() (específicos de las clases Círculo y Rectángulo) para calcular y mostrar el área de cada forma.

Perspectiva del patrón de diseño del prototipo:

• Creación de prototipos: en lugar de crear nuevos objetos de Círculo y Rectángulo desde cero, primero creamos una instancia de prototipo (circlePrototype y rectánguloPrototype).
• Clonación: Una vez que existe el prototipo, el método clone() se utiliza para crear nuevos objetos basados ​​en el prototipo. Esta es la esencia del Patrón Prototipo: crear objetos copiando un objeto existente (el prototipo).

Caso de uso:

El patrón Prototipo es útil cuando:

• Necesitas crear nuevos objetos clonando objetos existentes.
• Quieres evitar la subclasificación y reutilizar directamente objetos existentes como planos.
• la creación es costosa o compleja y cuando es necesario crear muchos objetos similares. Al utilizar prototipos, puede agilizar el proceso y mejorar la eficiencia.

Si has llegado hasta aquí ✨, deja un comentario a continuación con cualquier pregunta o idea. ¡Me encantaría saber de usted y participar en excelentes debates!✨