The Prototype Pattern in JavaScript

Use it to gain a performance boost compared to object-oriented classes

Photo by Domenico Loia on Unsplash

There are multiple design patterns that can be implemented in JavaScript, and in this piece, we will be going over the prototype design pattern, an object-based creational design pattern.

If you need a recap of the three types of design patterns in JavaScript, here’s an overview:

• Creational Design Patterns: Instead of having to directly instantiate objects, these patterns create them for you. The benefit of this approach is that it gives your program a little more flexibility when deciding which objects need to be created.
• Behavioral Design Patterns: These patterns are focused on the communication between objects.
• Structural Design Patterns: These patterns focus on class and object composition. They can be used to compose interfaces through inheritance and to define ways to compose multiple objects in order to achieve new functionality.

So, what exactly is the prototype pattern, and what does it do?

The Prototype Pattern

This pattern’s main focus is to help create objects that can be used as blueprints for any objects that are created by constructors. It does this through what’s called prototypal inheritance.

Since JavaScript has native support for prototypal inheritance, it’s naturally easy to work with to the point where you don’t really need to learn any new concepts outside the syntax itself.

When objects are created through the constructor function and contain the nameproperty, further objects created with the same constructor function will also have the same property, as shown below:

It sounds like typical class objects, but in reality, it avoids using classes altogether. The prototype design pattern simply creates copies of existing functional objects as opposed to defining brand-new objects.