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.
