Design Patterns — Prototype

In this article, we will discuss the Creational design pattern known as the Prototype. We will also go over an example of this pattern in JavaScript. Before we begin, let’s take a look at what a design pattern is, and why you should familiarize yourself with them.

Design Patterns

A Design Pattern is not a programming language, or a specific type of technology you can use. It is a paradigm, or, a pre-thought out solution to common problems you will encounter when building projects. Many scenarios you encounter when coding have probably already been encountered before. So, instead of trying to re-invent the wheel, why not just utilize a solution that has already proven itself many times over? This is why you should learn Design Patterns on your coding journey.

There are many Design Patterns, and multiple different groups of Design Patterns. There are also many resources available that can aide you in learning these common Design Patterns. You can also check out my previous articles here, where I have discussed other Patterns, as well as algorithms and other useful coding topics!

Prototype Design Pattern

As mentioned before, the Prototype Design Pattern is a creational pattern, meaning it is used to create other objects. The Prototype is all about cloning something that already exists, and making it easy to do so. The main idea is to create a new, initialized object that contains values it has copied from the Prototype object.

When Should I Use it?

The Prototype Design Pattern is best used in the following cases:

— When you want to clone objects with many properties without having to create a large class hierarchy

— When you have a small amount of different class states. It is easier to clone a few prototypes instead of having to consistently instantiate a new instance of a class

— When creating a new instance of a given class is too expensive or complicated

Now that we’ve discussed what the Design Pattern is about, it’s time to go over an example!

Lets Break it Down

The Prototype Design Patterns consists of 3 different parts:

1. Prototype — declares an interface to clone other objects with

2. ConcretePrototype — Implements the operation of cloning the prototype

3. Client — Creates the objects by utilizing the Prototype

Visual Example

credit: https://javascript.plainenglish.io/software-design-patterns-with-examples-prototype-b89fcac4239b

JavaScript is a language that very commonly used prototypes, for example, a string is a prototype containing many different values and methods that all other strings also contain. Let’s utilize a method that gives us the prototype of a value in Javascript.

// Object.getPrototypeOf(value)
var string = "Hello";
Object.getPrototypeOf(string);

This is what is logged to the console:

String Prototype

What is shown above is many of the values and methods that are attached to a string. This is all thanks to the String Prototype that is utilized when declaring a new String object in JavaScript.

Coming up with real world scenarios for this design pattern is difficult, so i came up with a “not-so-real” scenario. Imagine we are running a robot production company for a robot army (told you it wasn’t real), here we will utilize the Prototype design pattern to be able to create clones of the robots that are just starting in production.

// this represents the Prototype in our diagram
function MyPrototype(proto) {
   this.proto = proto;
   this.clone = function () {
      var robot = new Robot();
      robot.bodyType = proto.bodyType;
      robot.specialty = proto.specialty;
      robot.status = proto.status;
      return robot;
   }
}
// This represents the ConcretePrototype in our diagram
function Robot(bodyType, specialty, status) {
   
   this.bodyType = bodyType;
   this.specialty = specialty;
   this.status = status;
   this.listSpecs = function () {
      console.log(this.bodyType, this.specialty, this.status);
   }
}
// This represents the Client in our diagram
function Client() {
   var proto = new Robot("n/a", "n/a", "prototype phase");
   var prototype = new MyPrototype(proto);
   var clones = [];
   var robot1 = prototype.clone();
   var robot2 = prototype.clone();
   var robot3 = prototype.clone();
   clones.push(robot1, robot2, robot3);
   return clones;
}

The example above contains a function that declares an interface for the prototype that will be cloning itself(MyPrototype), a function that implements an operation for cloning itself(Robot), and a function that creates object clones of the prototype(Client).

Conclusion

In this article we learned about what a Prototype Design Pattern is, when it should be used, and an example of using it in JavaScript. The Prototype Pattern is often used to create clones of objects, and is utilized in many coding projects! I hope you learned something new, and I hope you continue to learn more about Design Patterns in the future. Happy Coding!