#3 Design Patterns — Prototype Pattern

Hello Everyone, Welcome to my blog 🙏. I hope you are all safe and that this blog finds you in good health ❤️.

In my previous blogs, we have learnt about

1. What are design patterns and What is Observer Pattern?

2. What is Constructor Pattern?

In this blog, we will learn more about 👉 Prototype Pattern

Prototype Pattern

A prototype pattern is used in sharing the properties among objects of the same type i.e. Objects that are created with the same constructor.

How does Prototype Pattern work? To understand it better, Let us take an example

In my previous blog, we know that Steve had a boutique, where he manufactures high-quality shirts and also customers like his collections and purchase them. He imports High-quality fabrics from different countries which is a primary reason for his successful business. In his manufacturing factory, everything is automated with different machinery. For all his machines, there is a common process followed to get similar shirts. And also we have seen how the constructor pattern works.

Adding to that, Steve wants to upgrade his machines. He wants them to pack the shirts along with stitching. Currently, this process is manual and time taking. So, he wants it to be automated.

Now, Let's understand how the prototype pattern is applied here.

Functional Based

function ManufactureProcess (size, color) {
  this.size = size
  this.color = color

  this.stitchShirt = function () {
    console.log(`Stitched shirt of ${this.color} color with ${this.size} size` )
  }
}

const machine1 = new ManufactureProcess("XL", "safron");
const machine2 = new ManufactureProcess("L", "blue");

ManufactureProcess.prototype.packShirt = function () {
      console.log(`Packed shirt of ${this.color} color with ${this.size} size` )
}

machine1.stitchShirt(); // "Stitched shirt of safron color with XL size"
machine1.packShirt(); // "Packed shirt of safron color with XL size"
machine2.stitchShirt(); // "Stitched shirt of blue color with L size"
machine2.packShirt(); // "Packed shirt of blue color with L size"

Check out the working code for functional-based here

Class Based

class ManufactureProcess {
  
  constructor(size, color) {
    this.size = size
    this.color = color
  }
  
  stitchShirt() {
    console.log(`Stitched shirt of ${this.color} color with ${this.size} size`)
  }
}

const machine1 = new ManufactureProcess("XL", "safron");
const machine2 = new ManufactureProcess("L", "blue");

ManufactureProcess.prototype.packShirt = function () {
  console.log(`Packed shirt of ${this.color} color with ${this.size} size`)
}

machine1.stitchShirt() // "Stitched shirt of safron color with XL size"
machine2.stitchShirt() // "Stitched shirt of blue color with L size"
machine1.packShirt() // "Packed shirt of safron color with XL size"
machine2.packShirt() // "Packed shirt of blue color with L size"

Check out the working code for class-based here

Now, Steve is super happy and he successfully upgraded all his machines with a new process i.e packing the shirts. This way he can manufacture more shirts by minimising manual efforts and saving a lot of time. Thanks to Prototype Pattern 🎯.

When to use the Prototype pattern?

As we know, All the plugins, packages, libraries, etc which we use in our projects are nothing but the best examples of constructor patterns. Similarly, if we want to upgrade or add a few methods to any plugin without disturbing the original implementation then that is where we use Prototype Pattern.

--------------------------------------------------------------------------------------------------------

Here we go, That’s it folks for this blog. Hope everyone liked it. If you like it, give it a love ❤️ , and share it with your friend.

For more exciting content on Frontend, Please do follow me 🎯.

Thanks a lot, Everyone 🙏. Until Next time, Happy Learning ✍️

Abhishek Kovuri, UI developer

#TWBloggersClub