JavaScript Prototype Pattern with Example

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Prototype Pattern Overview

According to The GOF, the prototype pattern creates objects based on a template of an existing object through cloning.

We can think of the prototype pattern as being based on prototypal inheritance where we create objects which act as prototypes for other objects. The prototype object itself is effectively used as a blueprint for each object the constructor creates.

One of the benefits of using the prototype pattern is that we're working with the prototypal strengths JavaScript has to offer natively rather than attempting to imitate features of other languages. With other design patterns, this isn't always the case.

To demonstrate this prototype pattern, we use Object.create() method which creates an object which has a specified prototype and optionally contains specified properties as well (e.g Object.create( prototype, optionalDescriptorObjects )).

For example, the below diagram shows a prototype of different cars:

Prototype Pattern Example

In this example, we have an Employee object that we use as the prototype to create another object employee1 with JavaScript’s Object.create feature:

// using Object.create Method 
var Employee = {
    firstName : 'Ramesh',
    lastName : 'Fadatare',
    emailId : 'ramesh@gmail.com',
    age : 29,
    getFullName : function (){
        return user.firstName + " " + user.lastName;
    }
} 

var employee1 = Object.create(Employee);

// access new object properties
console.log('firstName :',  employee1.firstName);
console.log('lastName :',  employee1.lastName);
console.log('emailId :',  employee1.emailId);
console.log('age :',  employee1.age);

Output:

firstName : Ramesh
lastName : Fadatare
emailId : ramesh@gmail.com
age : 29

Object.create() method has two parameters. A first parameter is a mandatory object that serves as the prototype of the new object to be created and this we have demonstrated in the above example. A second parameter is an optional object which contains the properties to be added to the new object. For example, we are adding emailId and age properties to the new object here:

// using Object.create Method
var Employee = {
    firstName : 'Ramesh',
    lastName : 'Fadatare',
    getFullName : function (){
        return user.firstName + " " + user.lastName;
    }
} 

var employee1 = Object.create(Employee,{
 
  "emailId": {
    value: "ramesh@gmail.com",
    // writable:false, configurable:false by default
    enumerable: true
  },
 
  "age": {
    value: 29,
    enumerable: true
  }
 
});

// access new object properties
console.log('firstName :',  employee1.firstName);
console.log('lastName :',  employee1.lastName);
console.log('emailId :',  employee1.emailId);
console.log('age :',  employee1.age);

Output:

firstName : Ramesh
lastName : Fadatare
emailId : ramesh@gmail.com
age : 29

Related JavaScript Design Patterns

• JavaScript EventBus Example - Subscribe/Publish Listeners

• JavaScript Publish/Subscribe Pattern Example //Popular

• JavaScript Factory Pattern with Example //Popular

• JavaScript Prototype Pattern with Example //Popular

• JavaScript Constructor Pattern with Example //Popular

• JavaScript Builder Pattern Example //Popular

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF