alt text
Benjamin Thomson
Web & UX Designer

Drink A Coffee With Me Today

Loading...
Success!
Error!

Follow On Instagram

Mayank Gupta (+91-9711083089)
Menu
Close

Prototype Pattern in JavaScript

Prototype Pattern in used to Create multiple Objects from a Constructor Function. Constructor function shall contain set of related functionalities and properties. these functionalities and properties can also be added to Prototype Property of the Constructor Function, this shall ensure that the properties and function are shared amongst all the Objects created out of it. We shall be understanding all these concepts in Details.


In the following article, we would build our understanding regarding ProtoType Pattern.


The article shall be focussed around 2 basic Concepts:

1. JavaScript Constructor Function

2. Prototype Keyword.


We would cover the following Topic:

1. JavaScript Constructor Function

2. Creating Object from Constructor Function

3. Understanding Prototype property

4. Prototype Pattern Implementation

5. Private Properties in Prototype Pattern


What is a Constructor Function

Constructor function can be used to create Multiple Objects. Creating Objects from Constructor Function shall ensure that the properties and function defined by the Constructor Function shall be available to all the Objects created from it.


Lets assume a scenerio for the same:

1. There is a company with a certain Employee Strength

2. The Employee Details shall contain the basic information about Name, Age and Designation.

3. Company need to add the details of all the Employee


Lets create constructor function for the same scenerio:

function Employee (name, age, designation) {

  this.Name = name;

  this.Age = age;

  this.Designation = designation;

}

This is a simple Implementation of the Consructor Function.


Creating Constructor Function for the same shall ensure that the properties defined on the "this" keyword shall be available to all the Objects which are created using this Constructor function.It act as a building block to create multiple instances of same type. Every Object shall contain following properties "Name", "Age" and "Designation".All these variables shall act as a public member to the created Object.


For those who belong to language like Java and C#, a constructor function shall resembel to a "Class".


We can create Objects from Constructor function just as we create Objects from Classes.


We can even add functions to the constructor function:

function Employee (name, age, designation) {

  this.Name = name;

  this.Age = age;

  this.Designation = designation;

  this.showDetails = function() [

    console.log("Age: " + this.Age + " Name: " + this.Name);

  }

}

The added function will be available to each of the Object created.


Creating Object from Constructor Function

Lets create a Object from a Constructor Function.


var newEmployee = new Employee("Mayank", 28, "Senior Software Developer");

console.log(newEmployee.Name);

In the above code, we can use "new" keyword to create Object from Constructor Function. The new Object created shall contain all the properties which were bound to "this" keyword. We can pass parameter to constructor function, which will assign these values to the Object properties.


We can access the properties of the New Object in the following manner

1. newEmployee.Name

2. newEmployee["Age"]


Lets see what "New Keyword" does while creating a new Object.

1. Create a new scope in the memory

2. Bind variables to the new scope

3. Refer to the newly created scope by "this"

4. Return "this" Object from the constructor function.


Prototype Keyword in JavaScript

Lets evaluate the problem with above code:

function Employee (name, age, designation) {

  this.Name = name;

  this.Age = age;

  this.Designation = designation;

  this.showDetails = function() [

    console.log("Age: " + this.Age + " Name: " + this.Name);

  }

}


In the above code, we are adding function to the "Employee" Object.


So from the architectural point of view, lets consider the following points:

1. Function do not store any state for the Object.

2. When a new Object is created using "new", seperate memory space is allocated for each function

3. Since function implementation is same for all Object, it can be shared between them

4. Sharing the function definition shall reduce the memory required for each Object


So, inorder to achieve the above specified results, we can use the "Prototype" property of constructor function.


Understanding Prototype property

Each constructor function created contains a "Prototype" property.


Prototype Property can be refered using: "Employee.prototype"


Using Prototype Object:

Here we would see that the Properties and Functionality added to the Employee Constructor function shall be added as a shared piece of information, shared between the different instances created using "new" keyword.


Lets see with an Example


function Employee (name, age, designation) {

  this.Name = name;

  this.Age = age;

  this.Designation = designation;

}

Employee.prototype.showDetails = function() { .. }

var EmployeeOne = new Employee("Mayank", 28, "Developer");

var EmployeeTwwo = new Employee("Mayank", 28, "Developer");

EmployeeOne.showDetails()

EmployeeTwo.showDetails()


Since the function "showDetails" is added to the "prototype" property of the constructor object, we will have access to the specified function in all the Objects created from Constructor Function.


The advantage of using Prototype are:

1. The variables and functions are shared between the Objects

2. Every Object shall not have implementation of same function or variable

3. Memory is shared between the Objects hence less utilisation


Prototype Pattern Implementation

Lets see the implementation of the Prototype Pattern:



// Defining a Constructor Function

function Employee (name, age, designation) {

  this.Name = name;

  this.Age = age;

  this.Designation = designation;

}


// Adding Functions to Prototype Object

Employee.prototype.showDetails = function() { ... }

Employee.prototype.showName = function() { ... }

Employee.prototype.showDesignation = function() { ... }


// Creating Objects from Prototype Property

var myEmployee = new Employee("Mayank", 28, "Developer");

var myEmployeeOne = new Employee("Mayank", 28, "Developer");

var myEmployeeTwo = new Employee("Mayank", 28, "Developer");


// Accessing Prototype functions from Objects

myEmployee.showName()

myEmployeeOne.showName()

myEmployeeTwo.showName()


Following are the points to be considered in above implementation:


1. "showDetails", "showName" is added top the prototype property of Employee

2. These functions shall be shared between the Objects created using "Constructor Function"


Private Properties in Prototype Pattern

Lets consider the following scenerio:

We have created a new variable "otherInfo" inside th constructor function.

This variable is private to the "Employee" Constructor Function.

Private variables cannot be accessed inside the Prototype Object.


function Employee (name, age, designation) {

  var otherInfo = "Some Data";

  this.Name = name;

  this.Age = age;

  this.Designation = designation;

}

Employee.prototype.showDetails = function() {

  console.log(otherInfo);  // This variable cannot be accessed

}


All the variables private to the "Constructor" function is not accessible inside the prototype Object

Variables should be added to the "this" reference in order to refer it via prototype function.


More References to Prototype Pattern:

http://www.dofactory.com/javascript/prototype-design-pattern
https://addyosmani.com/resources/essentialjsdesignpatterns/book/
https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know



{{Count}} Comments

{{comment.user}}

{{comment.message}}

{{comment.date.substring(0, 10)}}

Leave A Comment

;