Prototype

Prototype is a creational design pattern that lets you copy existing objects without making your code dependent on their classes.

The Prototype design pattern is a creational pattern that is used for creating objects by cloning an existing object, known as the prototype.

In JavaScript, this pattern is quite commonly used, as JavaScript is a prototype-based language.

The Prototype Design Pattern in JavaScript involves creating objects based on a template of an existing object through cloning.

This can be achieved using JavaScript's prototypal inheritance :

// Prototype object
const carPrototype = {
  // Default properties
  brand: "Generic",
  color: "White",
  price: 0,

  // Clone method
  clone: function() {
    // Create a new object inheriting from this prototype
    const clone = Object.create(this);
    return clone;
  }
};

// Creating specific instances using the prototype
const car1 = carPrototype.clone();
car1.brand = "Toyota";
car1.color = "Blue";
car1.price = 20000;

const car2 = carPrototype.clone();
car2.brand = "BMW";
car2.color = "Black";
car2.price = 50000;

// Testing
console.log(car1); // Output: { brand: "Toyota", color: "Blue", price: 20000 }
console.log(car2); // Output: { brand: "BMW", color: "Black", price: 50000 }

In this example:

• carPrototype serves as the prototype object containing default properties and a clone method.

• Specific instances (car1 and car2) are created by cloning carPrototype and then customizing their properties.

• Changes to the properties of the cloned objects do not affect the prototype or other instances, demonstrating how each instance is independent.

This demonstrates the Prototype Design Pattern in JavaScript, where objects can be created based on a prototype, allowing for easy cloning and customization.