menu

JavaScript/Typescript - 16 Topics

DEEP DIVE INTO

JavaScript/Typescript

Topic:Prototypical design pattern

menu

The Prototype Pattern is a creational design pattern that allows you to create new objects by copying an existing object, known as a prototype.

This pattern is useful when creating new objects with similar properties and behaviors as an existing object, without the need to initialize them from scratch. It can significantly improve performance and reduce code duplication.

Let's dive deep into implementing the Prototype Pattern in TypeScript:

Key Components:

  1. Prototype:

    • The Prototype is an interface or abstract class that declares the cloning method.

    • It defines a common interface for all concrete prototypes.

  2. Concrete Prototype:

    • A Concrete Prototype is a class that implements the cloning method declared in the Prototype.

    • It defines its own logic for creating a copy of itself.

  3. Client:

    • The Client is responsible for creating new objects by cloning a prototype.

    • It doesn't need to know the specific classes of prototypes; it works with the abstract Prototype interface.

Implementation:

Here's an example of how to implement the Prototype Pattern in TypeScript:

javascript// Prototype interface
interface Cloneable {
  clone(): Cloneable;
}

// Concrete Prototype
class Sheep implements Cloneable {
  constructor(public name: string, public weight: number) {}

  clone(): Sheep {
    // Create a new instance and copy the attributes
    return new Sheep(this.name, this.weight);
  }

  toString(): string {
    return `${this.name} - ${this.weight}kg`;
  }
}

// Client
class Farm {
  private sheepPrototype: Cloneable;

  constructor(prototype: Cloneable) {
    this.sheepPrototype = prototype;
  }

  breedSheep(): Sheep {
    // Clone the prototype to create a new sheep
    return this.sheepPrototype.clone() as Sheep;
  }
}

// Usage
const originalSheep = new Sheep("Dolly", 50);
const farm = new Farm(originalSheep);

const clonedSheep1 = farm.breedSheep();
const clonedSheep2 = farm.breedSheep();

console.log("Original Sheep: " + originalSheep.toString());
console.log("Cloned Sheep 1: " + clonedSheep1.toString());
console.log("Cloned Sheep 2: " + clonedSheep2.toString());

In this Prototype Pattern implementation:

  • Cloneable is the prototype interface that declares the clone method.

  • Sheep is a concrete prototype class that implements the Cloneable interface. It provides a cloning method.

  • Farm is the client class responsible for creating new objects by cloning the prototype.

  • The client works with the prototype interface, creating clones without knowing the concrete class of the prototype.

Benefits:

  • Allows you to create new objects by copying an existing prototype, reducing the need for complex initialization.

  • Improves performance and reduces code duplication when creating similar objects.

  • Supports the creation of objects at runtime based on different criteria.

The Prototype Pattern is commonly used when you have objects with complex initialization logic or when you need to create multiple objects with similar properties. It's especially valuable when the cost of creating an object from scratch is high, and you can benefit from copying an existing prototype.

1280 x 720 px