A guide to prototype pattern

In this article, let’s talk about prototype patterns. Prototype is a way to make copies of existing objects without relying on their classes.

Why prototype pattern?

If you have an object and you want to make an exact copy, here's what you do:

• First, create a new object of the same class.
• Then, go through all the fields of the original object and copy their values to the new object.

However, some objects can't be copied using that method because certain fields of the object may be private and not visible from outside of the object itself. On top of that, creating multiple copies of certain objects can lead to dependencies between those objects, which can cause issues when one object is modified and the changes need to be reflected in all of its copies.

Sometimes, you might be using the prototype pattern without even realizing it. For example, when you use the Object.create() method in JavaScript, you are creating a new object based on an existing object, which is the basic idea of the prototype pattern.

The prototype pattern is often used when creating objects that are costly to make, like network sockets or database connections. Rather than creating a new object every time, a single instance can be made and copied as needed to save resources and improve performance.

An example

Here's an example of using Object.create() in JavaScript:

const person = {
  name: "John",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
};

const john = Object.create(person);
john.name = "John";
john.age = 35;

john.greet(); // Output: "Hello, my name is John and I'm 35 years old."

By using Object.create(), we can create new objects based on existing objects, which can be more efficient than creating new objects from scratch each time. This can be especially useful for objects with complex initialization logic or expensive setup operations.

Let's take a look at an example of the prototype pattern, which allows us to create independent copies of an object.

interface Prototype {
  message: string;
  greet(): void;
  clone(): Prototype;
}

class Prototype {
  message: string;
  constructor(message: string) {
    this.message = message;
  }
  greet() {
    console.log(this.message);
  }
  clone(): Prototype {
    return Object.create(this);
  }
}

const prototype = new Prototype("Hello");
prototype.greet();

let clone = prototype.clone();
clone.greet();

In the example above, we created a clone of the prototype object using the clone() method. This creates a new object that is an exact copy of the original object.

To change the cloned object, we can do it without changing the original object.

const prototype = new Prototype("Hello");
prototype.greet();

let clone = prototype.clone();
clone.message = "Hi"; // Modify the cloned object
clone.greet(); // Output "Hi"

If we want to add a different method to our cloned object, we can simply define the new method in the Prototype class and then call it on the cloned object. For example:

interface Prototype {
  goodBye(): void;
}

let clone: Prototype = prototype.clone();

clone.goodBye = function() {
    console.log("Goodbye");
}
clone.goodBye();

In TypeScript, if you declare multiple interfaces with the same name, they will become a union type of those two interfaces.

The prototype pattern enables creating new objects without relying on their classes. It helps minimize the number of required sub classes and could be a flexible alternative to inheritance.This pattern is useful for creating flexible and efficient objects.

However,

• It becomes challenging to support when dealing with a complex object hierarchy.
• Some may consider this pattern inefficient in terms of performance and memory usage.

Thank you for your time❤️❤️

Related Articles

Understanding the Singleton Pattern

Learn how to ensure only one instance of an object exists in your application for improved efficiency and consistency.

Understanding builder pattern

Learn about the Builder pattern and how it can be used to create complex objects with ease.

A guide to Abstract Factory Design Pattern

Discover how the Abstract Factory pattern simplifies object creation and makes it easier to modify later.