a blog for those who code

Tuesday 23 February 2016

Understanding JavaScript Prototypes

In this post we will be discussing about JavaScript Prototypes. A prototype is nothing but an object which exists in every function in JavaScript. All JavaScript objects inherit their properties and methods from their prototype, which means if we create an object using new Object(), the object will inherit the properties and methods from a prototype called Object.prototype.

The prototypes are defined differently for function and object. For function, prototype is the object instance which will become the prototype for all objects created using the function as a constructor whereas for object, prototype is the object instance from which the object is inherited.

Lets take an example, when we create a function called People with properties name and gender as shown below, JavaScript will also create an empty object with the same name as of the function. Now JavaScript also points the function prototype object to this empty object.

function People (name, gender) {
  this.name = name
  this.gender = gender
}

Now lets say we want to add Nationality to the function prototype like People.prototype.nationality = 'Indian', JavaScript adds nationality properties to the empty object (function's prototype).

Now when we create a new object of Person as var per1 = new Person ('Coding', 'Male'), it creates a _proto_ property to our new object. This _proto_ property is nothing but a pointer to our People functions's prototype.

One thing to note that nationality property is been added to prototype object and not with the Person's object property. But if you try to get the nationality property using the code per1.nationality it first checks the object and then the prototype. Which means that if we have added the nationality property to the prototype we need not have to add it to the Person's object but the problem is nationality will be same for all the objects of Person.


Now you may ask me how to change the function's prototype. You can change the Function's Prototype using the command People.prototype = {nationality = 'US'}. Changing prototype is nothing but creating a new Person object with the property nationality = 'US'. Now when you create new object of Person nationality will always be US.

How to do Inheritance using Prototypes

We can create Inheritance chain using prototype. Lets take an example

function Earth() {

Earth.prototype.live = function {
  //live in Earth
}

Person.prototype = Object.create(Earth.prototype);
var per1 = new Person ('Coding', 'Male')
per1.live();

In the above example we have seen how live (which is not a member of Person but it is a property of its prototype Earth) can be called using person's object. This happens because every object and every prototype has a prototype (i.e succession of objects linked together to form a prototype chain). 

Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.

No comments:

Post a Comment