Prototype Pattern

// Prototype Pattern Example
class ShapePrototype {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.color = '#000000';
  }
  
  clone() {
    // Create a new instance with the same prototype
    const cloned = Object.create(Object.getPrototypeOf(this));
    
    // Copy all properties
    for (let prop in this) {
      if (this.hasOwnProperty(prop)) {
        // Deep clone objects and arrays
        if (typeof this[prop] === 'object' && this[prop] !== null) {
          cloned[prop] = Array.isArray(this[prop]) 
            ? [...this[prop]] 
            : { ...this[prop] };
        } else {
          cloned[prop] = this[prop];
        }
      }
    }
    
    return cloned;
  }
  
  move(x, y) {
    this.x = x;
    this.y = y;
  }
  
  setColor(color) {
    this.color = color;
  }
}

class Rectangle extends ShapePrototype {
  constructor(width = 0, height = 0) {
    super();
    this.width = width;
    this.height = height;
    this.type = 'rectangle';
  }
  
  getArea() {
    return this.width * this.height;
  }
}

class Circle extends ShapePrototype {
  constructor(radius = 0) {
    super();
    this.radius = radius;
    this.type = 'circle';
  }
  
  getArea() {
    return Math.PI * this.radius * this.radius;
  }
}

// Shape Registry for managing prototypes
class ShapeRegistry {
  constructor() {
    this.shapes = {};
  }
  
  registerShape(name, shape) {
    this.shapes[name] = shape;
  }
  
  createShape(name) {
    const prototype = this.shapes[name];
    if (!prototype) {
      throw new Error(`Shape '${name}' not found in registry`);
    }
    return prototype.clone();
  }
}

// Usage
const registry = new ShapeRegistry();

// Register prototype shapes
const rectanglePrototype = new Rectangle(100, 50);
rectanglePrototype.setColor('#FF0000');
registry.registerShape('red-rectangle', rectanglePrototype);

const circlePrototype = new Circle(30);
circlePrototype.setColor('#0000FF');
registry.registerShape('blue-circle', circlePrototype);

// Create new shapes from prototypes
const rect1 = registry.createShape('red-rectangle');
rect1.move(10, 20);

const rect2 = registry.createShape('red-rectangle');
rect2.move(100, 200);
rect2.setColor('#00FF00'); // Change color of this instance

const circle1 = registry.createShape('blue-circle');
circle1.move(50, 50);

console.log(rect1); // Rectangle at(10, 20) with red color
console.log(rect2); // Rectangle at(100, 200) with green color
console.log(circle1); // Circle at(50, 50) with blue color

// Native JavaScript prototype example
const carPrototype = {
  wheels: 4,
  start() {
    console.log('Engine started');
  },
  clone() {
    return Object.create(this);
  }
};

const car1 = carPrototype.clone();
car1.brand = 'Toyota';
car1.model = 'Camry';

const car2 = carPrototype.clone();
car2.brand = 'Honda';
car2.model = 'Accord';

console.log(car1.wheels); // 4 (inherited from prototype)
console.log(car2.wheels); // 4 (inherited from prototype)