Patrón Prototype: Ventajas y Desafíos en Diseño de Software

Clase 26 de 27 • Curso de Patrones de Diseño en JavaScript

Resumen

¿Cuáles son los beneficios del patrón Prototype?

El patrón Prototype es una herramienta poderosa en el diseño de software que permite clonar objetos de manera eficiente. Una de sus ventajas principales es que podemos crear copias de objetos complejos sin asociarnos a sus clases concretas, lo cual fomenta la flexibilidad en el desarrollo. Por ejemplo:

Independencia de clases concretas: Podemos clonar un objeto como un coche o un rinoceronte sin mencionar sus clases específicas. Esto se logra porque estos objetos extienden de una clase base.
Reducción de subclases: En lugar de crear múltiples subclases para diferentes configuraciones, simplemente clonamos un objeto base y modificamos sus propiedades. Esto es extremadamente útil al tratar con objetos complejos con numerosas propiedades.
Eficiencia en instanciación: Si necesitamos múltiples versiones de un objeto, evitar la repetición del código de instanciación es crucial. Así se omiten los inconvenientes de pasar numerosos parámetros al constructor, lo que facilita el desarrollo.

¿Qué desafíos presenta la implementación del patrón Prototype?

A pesar de sus beneficios, implementar el patrón Prototype no está exento de desafíos. Entre los cuales se encuentran:

Complejidad en la clonación: Aunque en muchos casos es sencillo copiar una instancia, algunas situaciones requieren un proceso de clonación más complejo, que puede incluir llamadas a API y otras consideraciones.
Referencias circulares: En objetos compuestos por otros objetos, puede haber problemas con referencias circulares. Si un objeto compuesto por otros objetos es clonado, pueden surgir problemas si alguna clase clonada forma parte de la composición original, lo que demanda una gestión cuidadosa.

¿Cuándo es recomendable usar el patrón Prototype?

El patrón Prototype es particularmente útil cuando buscamos:

Reducir subclases: Al minimizar la cantidad de subclases, el código se simplifica y se vuelve más manejable.
Fomentar la reutilización: Clonar objetos establecidos ayuda a maximizar la reutilización de componentes en diferentes contextos. La reutilización y extensibilidad son cruciales en el buen diseño de software, como se recalca constantemente en los patrones de diseño.

¿Cómo se relaciona JavaScript con el patrón Prototype?

JavaScript ofrece soporte nativo para el patrón Prototype, facilitando tareas como la clonación profunda (deep clone) de objetos. Al clonar un objeto en JavaScript, no es necesario instanciarlo de nuevo; basta con pasar el objeto a una función de clonación. Esta característica resalta las capacidades de JavaScript en cuanto a la gestión de objetos, optimizando el uso de recursos y el tiempo de implementación.

Para los desarrolladores que trabajan con JavaScript o TypeScript, este paradigma provee una metodología eficiente para gestionar objetos complejos. Se insta a los desarrolladores a experimentar con la clonación de objetos como parte de su aprendizaje, ya que el proceso promueve la flexibilidad y personalización del código.

Te animamos a compartir tus soluciones y creatividad en comentarios, fomentando un enriquecedor intercambio de ideas sobre el patrón Prototype y los patrones de diseño creacionales.

Alvaro Eduardo Garzón Pira

student•

¡Hola!

Te dejo mi código ejemplo aplicando en typescript el patrón de diseño prototype a una clase de la cuál tiene una relación de composición con otras clases:

class Person {
  private name: string;
  private lastName: string;
  constructor(name, lastName) {
    this.name = name;
    this.lastName = lastName;
  }
  get getName() {
    return this.name;
  }
  get getLastName() {
    return this.lastName;
  }
}

class User {
  private username: string;
  private creationDateUser: string;
  constructor(username) {
    this.username = username;
    const timeInMilisecs = Date.now();
    const date = new Date(timeInMilisecs);
    this.creationDateUser = date.toISOString();
  }
  get getUsername() {
    return this.username;
  }
  get getCreationDateUser() {
    return this.creationDateUser;
  }
}

class UserConfiguration {
  private directory: string;
  private homeFolder: string;
  constructor(directory, homeFolder) {
    this.directory = directory;
    this.homeFolder = homeFolder;
  }
  get getDirectory() {
    return this.directory;
  }
  get getHomeFolder() {
    return this.homeFolder;
  }
}

interface ICompleteUserProps {
  name: string;
  lastName: string;
  username: string;
  directory: string;
  homeFolder: string;
}

class CompleteUser {
  user: User;
  person: Person;
  userConfiguration: UserConfiguration;
  constructor({
    name,
    lastName,
    username,
    directory,
    homeFolder,
  }: ICompleteUserProps) {
    this.person = new Person(name, lastName);
    this.user = new User(username);
    this.userConfiguration = new UserConfiguration(directory, homeFolder);
    console.log('User created successfully, details:\n', this);
  }
  public clone() {
    const props: ICompleteUserProps = {
      name: this.person.getName,
      lastName: this.person.getLastName,
      username: this.user.getUsername,
      directory: this.userConfiguration.getDirectory,
      homeFolder: this.userConfiguration.getHomeFolder,
    };

    return new CompleteUser(props);
  }
}

const createOriginalObjectAndPrototype = ({
  name,
  lastName,
  username,
  directory,
  homeFolder,
}: ICompleteUserProps) => {
  const originalUser = new CompleteUser({
    name,
    lastName,
    username,
    directory,
    homeFolder,
  });
  const userClone = originalUser.clone();
  console.log(
    originalUser === userClone
      ? 'They are the same'
      : 'Different objects, prototype working'
  );
};

createOriginalObjectAndPrototype({
  name: 'Alvaro',
  lastName: 'Garzon',
  username: 'Alvaro8317',
  directory: 'home',
  homeFolder: 'alvaro8317',
});

Si lo prefieres, también subí el código a github

Harold Zurita Simon

student•

Solución 😄.. Se implementa Rhino y se aumenta engine como un atributo adicional. .

También pueden compilar código TS en línea, en el siguiente enlace: https://www.typescriptlang.org/play

type AvailableColors = "red" | "black" | "gray" | "default";
type EditionsType = "cvt" | "signature" | "default";
type EngineType = "electric" | "gasoline" | "diesel";
type CarConstructorParams = {
  edition: EditionsType;
  model: string;
  airBags: number;
  color: AvailableColors;
  engine: EngineType;
};
abstract class CarTS {
  private _edition: EditionsType;
  private _model: string;
  private _airBags: number;
  private _color: AvailableColors;
  private _engine: EngineType;

  constructor({
    edition,
    model,
    airBags,
    color,
    engine,
  }: CarConstructorParams) {
    this._edition = edition || "default";
    this._model = model || "";
    this._airBags = airBags || 0;
    this._color = color || "default";
    this._engine = engine || "gasoline";
  }

  set airBags(howMany: number) {
    this._airBags = howMany;
  }

  set color(color: AvailableColors) {
    this._color = color;
  }

  set model(model: string) {
    this._model = model;
  }

  set edition(edition: "cvt" | "signature" | "default") {
    this._edition = edition;
  }

  set engine(type: EngineType) {
    this._engine = type;
  }

  get airBags() {
    return this._airBags;
  }

  get color() {
    return this._color;
  }

  get model() {
    return this._model;
  }

  get edition() {
    return this._edition;
  }

  get engine() {
    return this._engine;
  }

  abstract clone(): CarTS;
}

class MastodonCarTS extends CarTS {
  constructor(carToClone?: MastodonCarTS);
  constructor(carToClone: MastodonCarTS) {
    super({
      edition: carToClone?.edition,
      color: carToClone?.color,
      model: carToClone?.model,
      airBags: carToClone?.airBags,
      engine: carToClone?.engine,
    });
  }

  clone(): MastodonCarTS {
    return new MastodonCarTS(this);
  }
}

class RhinoCarTS extends CarTS {
  constructor(carToClone?: RhinoCarTS);
  constructor(carToClone: RhinoCarTS) {
    super({
      edition: carToClone?.edition,
      color: carToClone?.color,
      model: carToClone?.model,
      airBags: carToClone?.airBags,
      engine: carToClone?.engine,
    });
  }

  clone(): RhinoCarTS {
    return new RhinoCarTS(this);
  }
}

class DirectorTS {
  private productionLine!: CarProductionLineTS;

  setProductionLine(productionLine: CarProductionLineTS) {
    this.productionLine = productionLine;
  }

  constructCvtEdition() {
    this.productionLine.setAirBags(4);
    this.productionLine.setColor("red");
    this.productionLine.setEdition("CVT");
  }

  constructSignatureEdition() {
    this.productionLine.setAirBags(8);
    this.productionLine.setColor("gray");
    this.productionLine.setEdition("signature");
  }
}

interface CarProductionLineTS {
  setAirBags(howMany: number): void;
  setColor(color: AvailableColors): void;
  setEdition(edition: string): void;
  resetProductionLine(car: CarTS): void;
}

type ConstructorParams = { factory: FactoryTS };
class SedanProductionLineTS implements CarProductionLineTS {
  private sedanCar!: CarTS;
  private carFactory!: FactoryTS;

  constructor({ factory }: ConstructorParams) {
    this.carFactory = factory;
    this.resetProductionLine(this.carFactory.create());
  }

  resetProductionLine(car: CarTS): void {
    this.sedanCar = car;
  }

  setAirBags(howMany: number): SedanProductionLineTS {
    this.sedanCar.airBags = howMany;
    return this;
  }

  setColor(color: AvailableColors): SedanProductionLineTS {
    this.sedanCar.color = color;
    return this;
  }

  setEdition(edition: EditionsType): SedanProductionLineTS {
    this.sedanCar.edition = edition;
    return this;
  }

  setModel(): SedanProductionLineTS {
    this.sedanCar.model = "sedan";
    return this;
  }

  setEngine(engine: EngineType): SedanProductionLineTS {
    this.sedanCar.engine = engine;
    return this;
  }

  build(): CarTS {
    this.setModel();
    const sedanCar = this.sedanCar;
    this.resetProductionLine(this.carFactory.create());
    return sedanCar;
  }
}

interface FactoryTS {
  create(): CarTS;
}

class MastodonCarFactoryTS implements FactoryTS {
  create(): CarTS {
    return new MastodonCarTS();
  }
}

class RhinoCarFactoryTS implements FactoryTS {
  create(): CarTS {
    return new RhinoCarTS();
  }
}

function appBuilderTS(director: DirectorTS) {
  const mastodonSedanProductionLine = new SedanProductionLineTS({
    factory: new MastodonCarFactoryTS(),
  });
  director.setProductionLine(mastodonSedanProductionLine);
  director.constructCvtEdition();
  const mastodonSedanCvt = mastodonSedanProductionLine
    .setEngine("diesel")
    .build();
  console.log(mastodonSedanCvt);
  const mastodonSedanCvtPrototype = mastodonSedanCvt.clone();
  console.log(mastodonSedanCvtPrototype);

  director.constructSignatureEdition();
  const mastodonSedanSignature = mastodonSedanProductionLine.build();
  console.log(mastodonSedanSignature);
  const mastodonSedanSignaturePrototype = mastodonSedanSignature.clone();
  console.log(mastodonSedanSignaturePrototype);

  const rhinoSedanProductionLine = new SedanProductionLineTS({
    factory: new RhinoCarFactoryTS(),
  });
  director.setProductionLine(rhinoSedanProductionLine);
  director.constructCvtEdition();
  const rhinoSedanCvt = rhinoSedanProductionLine.setEngine("electric").build();
  console.log(rhinoSedanCvt);
  const rhinoSedanCvtPrototype = rhinoSedanCvt.clone();
  console.log(rhinoSedanCvtPrototype);

  director.constructSignatureEdition();
  const rhinoSedanSignature = rhinoSedanProductionLine.build();
  console.log(rhinoSedanSignature);
  const rhinoSedanSignaturePrototype = rhinoSedanSignature.clone();
  console.log(rhinoSedanSignaturePrototype);
}

appBuilderTS(new DirectorTS());

Daniel Paredes

student•

Yo puedo darles como ejemplo práctico de uso, la clonación de de un objeto para modificarlo en un formulario, si el usuario acepta, el clon remplaza al nuevo, si no se revierte los cambios y se borra el clon.

Johan Sebastian

student•

// ----- Base product -----

class BaseCar {
  constructor({ edition = '', model = '', airBags = 0, color = '' } = {}) {
    this._edition = edition;
    this._model = model;
    this._airBags = airBags;
    this._color = color;
  }

  set edition(edition) {
    this._edition = edition;
  }
  get edition() {
    return this._edition;
  }

  set model(model) {
    this._model = model;
  }
  get model() {
    return this._model;
  }

  set airBags(howMany) {
    this._airBags = howMany;
  }
  get airBags() {
    return this._airBags;
  }

  set color(color) {
    this._color = color;
  }
  get color() {
    return this._color;
  }

  clone() {
    throw new Error('Method not implemented!');
  }

  toString() {
    return `Modelo: ${this.model}, Edición: ${this.edition}, Color: ${this.color}, Airbags: ${this.airBags}`;
  }
}

// ----- Concrete products -----

class MastodonSedanCar extends BaseCar {
  constructor(carToClone) {
    super({
      edition: carToClone?.edition,
      model: 'sedan',
      airBags: carToClone?.airBags,
      color: carToClone?.color,
    });
  }

  clone() {
    return new MastodonSedanCar(this);
  }
}

class RhinoSedanCar extends BaseCar {
  constructor(carToClone) {
    super({
      edition: carToClone?.edition,
      model: 'sedan',
      airBags: carToClone?.airBags,
      color: carToClone?.color,
    });
  }

  clone() {
    return new RhinoSedanCar(this);
  }
}

// ----- Base factory -----

class CarFactory {
  create() {
    throw new Error('Method not implemented!');
  }
}

// ----- Concrete factories -----

class MastodonSedanCarFactory extends CarFactory {
  create() {
    return new MastodonSedanCar();
  }
}

class RhinoSedanCarFactory extends CarFactory {
  create() {
    return new RhinoSedanCar();
  }
}

// ----- Base builder -----

class CarProductionLine {
  setEdition(edition) {
    throw new Error('Method not implemented!');
  }
  setAirBags(howMany) {
    throw new Error('Method not implemented!');
  }
  setColor(color) {
    throw new Error('Method not implemented!');
  }
  setCarFactory(factory) {
    throw new Error('Method not implemented!');
  }
  resetProductionLine(newCar) {
    throw new Error('Method not implemented!');
  }
}

// ----- Concrete builder -----

class SedanProductionLine extends CarProductionLine {
  constructor({ factory }) {
    super();
    this.carFactory = factory;
    this.resetProductionLine(this.carFactory.create());
  }

  setEdition(edition) {
    this.car.edition = edition;
    return this;
  }

  setAirBags(howMany) {
    this.car.airBags = howMany;
    return this;
  }

  setColor(color) {
    this.car.color = color;
    return this;
  }

  setCarFactory(factory) {
    this.carFactory = factory;
    this.resetProductionLine(this.carFactory.create());
  }

  resetProductionLine(car) {
    this.car = car;
  }

  build() {
    const builtCar = this.car;
    this.resetProductionLine(this.carFactory.create());
    return builtCar;
  }
}

// ----- Director -----

class Director {
  setProductionLine(productionLine) {
    this.productionLine = productionLine;
  }

  setProductionLineCarFactory(carFactory) {
    this.productionLine.setCarFactory(carFactory);
  }

  constructCvtEdition() {
    this.productionLine
      .setAirBags(4)
      .setColor('red')
      .setEdition('cvt');
  }

  constructSignatureEdition() {
    this.productionLine
      .setAirBags(8)
      .setColor('gray')
      .setEdition('signature');
  }
}

// ----- Main function -----

function appPrototype(director) {
  console.log('--- [JS] Calling appPrototype ---\n');

  if (!director) {
    console.log('--- No director provided ---');
    return;
  }

  const sedanProductionLine = new SedanProductionLine({
    factory: new MastodonSedanCarFactory(),
  });

  director.setProductionLine(sedanProductionLine);

  director.constructCvtEdition();
  const mastodonSedanCvt = sedanProductionLine.build();
  console.log('--- Mastodon Sedan CVT ---');
  console.log(mastodonSedanCvt.toString());

  const mastodonSedanCvtClone = mastodonSedanCvt.clone();
  console.log('\n--- Mastodon Sedan CVT Clone ---');
  console.log(mastodonSedanCvtClone.toString());

  // Cambiamos la fábrica a Rhino
  director.setProductionLineCarFactory(new RhinoSedanCarFactory());
  director.constructCvtEdition();
  const rhinoSedanCvt = sedanProductionLine.build();
  console.log('\n--- Rhino Sedan CVT ---');
  console.log(rhinoSedanCvt.toString());

  const rhinoSedanCvtClone = rhinoSedanCvt.clone();
  console.log('\n--- Rhino Sedan CVT Clone ---');
  console.log(rhinoSedanCvtClone.toString());
}

appPrototype(new Director());

Jennifer Yanez Jiménez

student•

Yo le pedi a ChatGPT que me creara un reto para aplicar Prototype desde cero. En este caso fue una implementación de Abstract Factory + Prototype para la creación de drones. Aquí les dejo el reto (comentado al inicio) y su resolución.

/**
 * 
 * 🤖 Reto: Clonación de Drones Inteligentes con Prototype

🧠 Contexto:
Trabajas en una empresa llamada SkyTech, especializada en la fabricación de drones para distintos propósitos. Cada dron puede ser personalizado con una serie de características. El equipo quiere poder clonar drones ya configurados para acelerar la producción de modelos populares, usando el patrón Prototype.

✨ Objetivo:
Implementar el patrón Prototype para poder clonar drones ya configurados, sin tener que reconstruirlos desde cero.

🚁 Cada dron tiene:
Nombre del modelo: (string, ej: "Falcon", "Hawk", "Eagle")
Tipo: explorador, táctico, logístico
Autonomía (minutos): número (entre 10 y 180)
Sensores: array de strings (ej: ["térmico", "nocturno", "proximidad"])
Camuflaje activo: boolean
Color: blanco, negro, camuflado, metálico
🧱 Estructura esperada:
Una clase base Drone que tenga todos los atributos y el método clone().
Al menos dos subclases concretas de Drone, como FalconDrone, HawkDrone.
Crea un pequeño script que:
Cree una instancia original de cada uno (con configuraciones personalizadas).
Use .clone() para crear copias.
Cambie alguna propiedad del clon (por ejemplo, el color o los sensores).
Use .describe() para mostrar en consola el resultado del original y su clon.
📌 Reglas:
Solo usa console.log() dentro de .describe() del dron.
Cada subclase debe implementar su propio clone().
Usa destructuración en el constructor para facilitar la clonación:
constructor({ tipo = '', autonomia = 0, ... } = {}) { ... }
El clone() debe retornar una nueva instancia de su misma clase.
💡 Pistas:
Puedes pasar el objeto a clonar como parámetro del constructor, igual que hiciste en el reto del auto.
Asegúrate de hacer copia profunda del array de sensores si vas a modificarlo (usa .slice() o spread [...original]).
 * 
 * 
 */

/**
 * ABSTRACT FACTORY + PROTOTYPE
 */

// Clase base: Dron
class Drone {
    constructor({
        modelo = "",
        tipo = "",
        autonomia = 0,
        sensores = [],
        camuflajeActivo = true,
        color = ""
    } = {}){
        this.modelo = modelo
        this.tipo = tipo
        this.autonomia = autonomia
        this.sensores = sensores
        this.camuflajeActivo = camuflajeActivo
        this.color = color
    }
    setModelo(){
        throw new Error("Method not implemented")
    }
    setTipo(){
        throw new Error("Method not implemented")
    }
    setAutonomia(){
        throw new Error("Method not implemented")
    }
    setSensores(){
        throw new Error("Method not implemented")
    }
    setCamuflajeActivo(){
        throw new Error("Method not implemented")
    }
    setColor(){
        throw new Error("Method not implemented")
    }
    clone(){
        throw new Error("Method not implemented")
    }
}

// Clases concretas
class FalconDrone extends Drone {
    constructor(droneToClone){
        super({
            modelo: droneToClone?.modelo,
            tipo: droneToClone?.tipo,
            autonomia: droneToClone?.autonomia,
            sensores: droneToClone?.sensores,
            camuflajeActivo: droneToClone?.camuflajeActivo,
            color: droneToClone?.color
        });
        if (!droneToClone) {
            this.setModelo();
            this.setTipo();
            this.setAutonomia();
            this.setSensores();
            this.setCamuflajeActivo();
            this.setColor();
        }
    }

    setModelo(){
        this.modelo = "Falcon"
    }
    setTipo(){
        this.tipo = "Tactico"
    }
    setAutonomia(){
        this.autonomia = 120
    }
    setSensores(){
        this.sensores = ["Nocturno", "Termico"]
    }
    setCamuflajeActivo(){
        this.camuflajeActivo = true
    }
    setColor(){
        this.color = "Blanco"
    }
    clone(){
        return new FalconDrone(this)
    }
    describe(){
        console.log(`Modelo: ${this.modelo},
                    Tipo: ${this.tipo},
                    Autonomia: ${this.autonomia}min,
                    Sensores: ${this.sensores},
                    Camuflaje Activo: ${this.camuflajeActivo},
                    Color: ${this.color}`)
    }
}

class HawkDrone extends Drone {
    constructor(droneToClone){
        super({
            modelo: droneToClone?.modelo,
            tipo: droneToClone?.tipo,
            autonomia: droneToClone?.autonomia,
            sensores: droneToClone?.sensores,
            camuflajeActivo: droneToClone?.camuflajeActivo,
            color: droneToClone?.color
        });
        if (!droneToClone) {
            this.setModelo();
            this.setTipo();
            this.setAutonomia();
            this.setSensores();
            this.setCamuflajeActivo();
            this.setColor();
    }
    }

    setModelo(){
        this.modelo = "Hawk"
    }
    setTipo(){
        this.tipo = "Explorador"
    }
    setAutonomia(){
        this.autonomia = 120
    }
    setSensores(){
        this.sensores = ["Proximidad", "Termico"]
    }
    setCamuflajeActivo(){
        this.camuflajeActivo = false
    }
    setColor(){
        this.color = "Gris"
    }
    clone(){
        return new HawkDrone(this)
    }
    describe(){
        console.log(`Modelo: ${this.modelo},
                    Tipo: ${this.tipo},
                    Autonomia: ${this.autonomia}min,
                    Sensores: ${this.sensores},
                    Camuflaje Activo: ${this.camuflajeActivo},
                    Color: ${this.color}`)
    }
}

// Fabricas abstractas
class DroneFactory{
    createDrone(){
        throw new Error("Method not implemented")
    }
}

// Fabricas Concretas
class FalconDroneFactory extends DroneFactory {
    createDrone(){
        return new FalconDrone()
    }
}
class HawkDroneFactory extends DroneFactory {
    createDrone(){
        return new HawkDrone()
    }
}

//Client App
function appBuilder(droneFactory){
    const falconDrone = droneFactory.createDrone()
    console.log("Falcon Drone Original")
    falconDrone.describe()

    const falconDroneClone = falconDrone.clone()
    console.log("Falcon Drone Clone")
    falconDroneClone.describe()

    // Para demostrar que el clon es independiente
    falconDroneClone.color = "Negro"
    falconDroneClone.sensores.push("Térmico adicional")

    console.log("Falcon Drone Clone Modificado")
    falconDroneClone.describe()

    console.log("Falcon Drone Original Después")
    falconDrone.describe()

}

appBuilder(new FalconDroneFactory())

Luis Eduardo Payano Villar

student•

Excelente, el prototype me resulto algo mas amigable a la hora de poder implementar una dependencia, solamente tendría que pasar la instancia y el objeto estaría clonado, aunque este solamente se utilice para patrones específicos.

Patrón Prototype: Ventajas y Desafíos en Diseño de Software

Introduccion

Patrones de Diseño Creacionales en Software

Patrones Creacionales: Singleton, Factory, Abstract Factory, Builder, Prototype

Singleton

Patrón Singleton: Implementación y Uso en Programación Orientada a Objetos

Diagrama de Clases del Patrón Singleton en JavaScript

Diferencias entre JavaScript y TypeScript en patrones de diseño

Ventajas y desventajas del patrón Singleton en diseño de software

Factory

Patrones de Diseño: Introducción al Patrón Factory

Patrón Factory: Implementación y Detalles Esenciales

Implementación del Patrón Factory Method en JavaScript

Comparación del Patrón Factory en JavaScript y TypeScript

Patrón Factory: Ventajas y Desventajas en Desarrollo de Software

Abstract Factory

Patrón Abstract Factory: Estrategia para Múltiples Fábricas de Coches

Patrones de Diseño: Abstract Factory en Producción de Coches

Implementación del patrón Abstract Factory en JavaScript

Diferencias entre JavaScript y TypeScript en el patrón Abstract Factory

Patrón Abstract Factory: Ventajas y Desventajas

Builder

Patrón Builder: Diseño y Aplicación en Producción de Vehículos

Patrón Builder: Análisis de Diagrama y Clases Relacionadas

Implementación del Patrón Builder en Producción de Coches

Comparación del Patrón Builder en JavaScript vs TypeScript

Patrón Builder: Ventajas, Desventajas y Aplicaciones Prácticas

Prototype

Patrón Prototype: Clonación de Objetos en Diseño de Software

Patrón Prototype en JavaScript y TypeScript

Implementación del Patrón Prototype en JavaScript

Comparación de Prototype en JavaScript y TypeScript