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.

Prototype Introduction

Every object is an object of object. If we want to make the complex web application then we need to use prototype concept with Object Oritented at javascript in one level.

Object.prototype is an object whose properties and methods are inherited to new object when the new object is creating by using that constructor. The consctructor name would be same as for use to create new object.

Here we go for example.
var mydate = new Date();

Here via the Date.prototype, all the methods and properties of Date constructor would inherited to mydate object like getMonths() and getSeconds(). If you want to get month then you can simply do.
mydate.getMonths().
The getMonths() method is not user defined it is inherited from Date.prototype.

How do you use the prototype concept in your custom object. 
var mercidies = new Car();
function Car(name){
this.name = name;
}

Now if you want to add custom method to Car class then you can do.

Car.prototype.getValue = function (val){
var total = val + 100*(12.3/100);
}

For properites
Car.prototype.color = 'gray';

Now Every object is made by using Car() cunstroctur inherited getValue() method and color property.

So we can say prototype concept shares the information(properties and methods) to all those object which are created by using Car() cunstroctur.

So what is the main benfit of it?
It's main advantage is when we create the method and property by using object's prototype concept, methods and properties are shared to each instance made by using that paritcular cunstructor. Which means there is no need to make a copy of methods and properites for each instance.

And the result would be it uses less memory and the speed would be increase obviously.

What if the prototype concept is not exist?
For example simple class
function Car(){
this.name = name;
this.color = 'gray';
this.getValue  = function (){
var total = val + 100*(12.3/100);
}
}

When you make the instances by using that Car cunstructor then each instance/object copy those all properties and methods. Which is not good into complex web application.
If we use the concept of prototype then cunsctructor shares proprites and methods to each object. That's how its increase the speed.

Prototype Chains
By default every simple object has inherited the properties and methods from Object.prototype.
When the method and properties are accessing of objects, it travels through child to parent object.
For example

function Car(name){
this.name = name;
}

var myCar = new Car();
myCar.toString();

When the toString () is called first of all it sees that is it available in Car's prototype if yes then it returns particular value otherwise it heads to check for Object.prototype methods and returns the particular value if found the method otherwise returns null.