Understanding Prototype Pattern in JavaScript: Part 2

Recently we had a look at Understanding Prototype Pattern in JavaScript. I tried to explain this pattern in the most simplified way possible. In this article we will get more detailed and see how the Prototype Pattern works in JavaScript.

Putting it in simple words about the Prototype Pattern, we create an object using a template of an existing object. In the Prototype Pattern we create an object known as a prototype. This object acts as prototype for any object created using this prototype.
For example, if we have an object named Salary with property basicSalary then all the objects created using the object Salary as prototype will have basicSalary as a property.
Let us try to understand it with an example. Consider you have a prototype object Salary as below.

 var Salary = 
{
    basicSalary: 10000,
    printSalary : function()
    {
        console.log(this.basicSalary);
     }                
}; 

var emp1Salary = Object.create(Salary);
emp1Salary.basicSalary = 9000;
emp1Salary.printSalary();

We have created a Salary object as a prototype and then created another object emp1Salary using Salary as prototype. Now emp1Salary also has basicSalary and printSalary as a property. You can infer from the result that using prototype inheritance is very easily done. In emp1Salary we are altering the value of the basicSalary property and as output you will get 9000 printed.

Another way Object.create() can be used is by passing extra properties for derived objects. So for example if we want to have an extra property like bonus then that can be passed as a second parameter. This can be done as follows.

 var Salary = 
{
    basicSalary: 10000,
    printSalary : function()
    {
        console.log(this.basicSalary);
     }                

};

var emp1Salary = Object.create(Salary, {"bonus":{value:1000}});
// emp1Salary.basicSalary = 9000;
console.log(emp1Salary.bonus);

In the above example we have passed an extra property, bonus, to the object emp1Salary. Now emp1Salary has one extra property, bonus.

If required, we can work with the Prototype Pattern without using Object.Create(). In the following we are first creating salaryPrototype and then in a function we are using the prototype object and then creating emp1Salary using Salary as prototype.

var salaryPrototype =
{
     init: function (basicSalary) {
     this.basicSalary = basicSalary
 },
 printSalary: function ()
{
     console.log(this.basicSalary);
 }

}
        
function salary(basicSalary)
{
    function F() { };
    F.prototype = salaryPrototype;
    var f = new F();
    f.init(basicSalary);
    return f; 
}

var emp1Salary = salary("1898");       
emp1Salary.printSalary();

By using a prototype we can get inheritance and since it always maintains one instance of properties for all objects then it has good performance as well. I hope you find this article useful. Thanks for reading.

Previous article: Understanding Prototype Pattern in JavaScript