About prototype

What prototype is?

Prototype is an object, in JavaScript, a constructor(function) has a prototype which has it's properties, and methods.

These properties and methods would be inherited to instance which is created from particular constructor. Here we go with the example,

var Transport = function (){
this.name = "car";
this.wheel = 4;
}

Transport.prototype.run = function (){
console.log("The " + this.name + " " + " run fast");
}

tp = new Transport();
tp.run(); //this car run fast

Prototype-Figure:-1 

Here  the method run()  is defined through the prototype to Transport constructor.

Why we need the prototype in this way as we can do simple like this.

var Transport = function (){
this.name = "car";
this.wheel = 4;
this.run = function (){
console.log("The " + this.name + " " + " run fast");
}
}

tp = new Transport();
tp.run(); //this car run fast

Every time the Transport is invoked this.run has an instance of Function constructor, For each instance of Transport, there would be  each different instance of Function for run method.

In simple words, If we have instances of Tranport() like

tp1 = new Transport();
tp2 = new Transport();

tp1 and tp2 have different instance of Function for run method which means
tp1.run == tup2.run is false.

Where the run method is performing same behavior for both instances tp1 and tp2.

So  at Prototype-Figure:-1, we defined the run method through the prototype object, in this case the run method would be shared over the instances tp1 and tp2.
Which means tp1.run and tp2.run have same instance of Function for run method in this yo case you could say.

tp1.run ==  tp2.run //true

Think about thousands instances are made from Transpor(). If we don't use prototype concept then thousand different function instances would be created for run method to thousand instances.

If we use prototype then there would be only one function instance for run method when the instances of Transport are created.


We have illustrated this concept with below figure,

Under the part of "before use prototype", you can see three object instances.

Each new instance of function is assigned to run method of particular object, so there is three instances of new functions are assigned to run when three objects are created. If there is thousand objects then there will be thousand new instances of function  which is not god.

If we assigned the run method with prototype object of constructor then various instances  point to the same function run from prototype object, as you can see  at part under "After user prototype", three instances(Mercidies, Ferari, hondaCity) are sharing the same method run.

So performance wise it does matter when the objects in thousands or more.

Prototype for inheritance.

Till EcmaScript 5, JavaScript does not have class concept like PHP, Java. To achieve this concept in JavaScript, Prototype is very useful.

Inheritance is important concept for Object oriented Concept. Below example show the inheritance concept in JavaScript.


var Transport = function(){
this.motion = "movable";
this.move = function(){
console.log(this.name + " does move according to speed and its " + this.motion);
}
}

var Car = function (name, color, price, sound){
this.name = name;
this.color = color;
this.price = price
this.sound = sound;
this.sounding  = function (){
console.log(this.name + "is souding " + this.sound);
}
}

Car.prototype = new Transport();

var hondaCity =  new Car("honda city", "black", "$10000", "smooth");
hondaCity.move();
hondaCity.sounding();


We have a super class Transport and sub class Car, As you can see by this line

Car.prototype = new Transport();

We have inherited the property 'motion' and method 'move' from Transport into Car. So Car has the property motion and method move that's why hondaCity.move() display the "honda city does move according to speed and its movable".

So prototype can be use to achieve inheritance concept in javaScript.

Still there is problem in above example, as above discussed there would be created the multiple function instances when we create the various instances from Car constructor. Here is the improved version.

We split-ed the move function from constructor defined by located outside from Transport constructor like

var Transport = function(){
this.motion = "movable";
}

Transport.prototype.move = function (){
console.log(this.name + " does move according to speed and its " + this.motion);
}

var Car = function (name, color, price, sound){
this.name = name;
this.color = color;
this.price = price
this.sound = sound;
this.sounding  = function (){
console.log(this.name + " is sounding " + this.sound);
}
}

Car.prototype = new Transport();

var hondaCity =  new Car("honda city", "black", "$10000", "smooth");
hondaCity.move();
hondaCity.sounding();

How prototype chain works

When we  use particular property/method on particular instance, then first of all it would be search on that instance, if found then okay otherwise search operation would be perform in prototype of constructor from which that instance is made, The search would  be continue to upper level until the search is found or top level constructor is found.

Here we go with example,

As we know every instance has internal pointer to prototype object and  prototype object points to the constructor,  so what if prototype object has instance of another constructor. In that case prototype object points to the prototype of another constructor.

Here we go with above example.

Car.prototype has an instance of Transport constructor so it does point to prototype of Transport.

So when we execute the hondaCity.move() first it would be search on hondaCity, not found then it would be search on Car prototype still not found now it would be search on prototype of Transport now it is found and executed.