Dhananjay Kumar

Recently we had a look on Understanding Prototype Pattern in JavaScript. I tried to explain this pattern in most simplified way. In this post we will get more dipper and see how prototype works in JavaScript.

Putting it in simple words in prototype pattern, we create object using template of an existing object. In prototype pattern we create an object known as 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 object Salary as prototype will have basicSalary as 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 Salary object as prototype and then created another object emp1Salary using Salary as prototype. Now emp1Salary also have basicSalary and printSalary as property. You can infer from result that using prototype inheritance is very easily achieved. In emp1Salary we are altering value of basicSalary property and as output you will get 9000 printed.

Other way Object.create() can be used 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 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 above example we have passed extra property bonus to object emp1Salary. Now emp1Salary has one extra property bonus.

If required we can work with prototype pattern without using Object.Create(). In below 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 prototype we can achieve inheritance and since its always keep one instance of properties for all objects then it has good performance as well. I hope you find this post useful. Thanks for reading.