Post
Ask Question

Prototype In JavaScript

Prototype In JavaScript

  • Prototype is basically an object called prototype object.
  • We can add methods/properties in prototype object.
  • Whatever function we create in javascript comes with prototype property through javascript engine.
Let us start with some examples,
 
Example 1
  1. <html>  
  2.     <head>  
  3.         <script>  
  4.             function Car(name)  
  5.             {  
  6.                 this.brandName = name;  
  7.                 this.getBrandName = function()  
  8.                 {  
  9.                     return this.brandName;  
  10.                 }  
  11.             }  
  12.   
  13.             var volksvagen = new Car("VolksVagen");  
  14.             var audi = new Car("Audi");  
  15.             var bentlay = new Car("Bentlay");  
  16.   
  17.             document.write("volksvagen.brandName : "+volksvagen.getBrandName());  
  18.             document.write("<br><br>");  
  19.             document.write("audi.brandName : "+audi.getBrandName());  
  20.             document.write("<br><br>");  
  21.             document.write("bentlay.brandName : "+bentlay.getBrandName());  
  22.         </script>  
  23.     </head>  
  24. </html>  
The problem with this approach is that it will create a new copy of function getBrandName() for every new Car object. If you created 100 objects of Car then it will create 100 copies of function getBrandName().
 
Example 2
  1. <html>  
  2.     <head>  
  3.         <script>  
  4.             function Car(name)  
  5.             {  
  6.                 this.brandName = name;  
  7.             }  
  8.   
  9.             var volksvagen = new Car("VolksVagen");  
  10.             var audi = new Car("Audi");  
  11.             var bentlay = new Car("Bentlay");  
  12.   
  13.             volksvagen.getBrandName = function()  
  14.             {  
  15.                 return this.brandName;  
  16.             }  
  17.   
  18.             document.write("volksvagen.brandName : "+volksvagen.getBrandName());  
  19.             document.write("<br><br>");  
  20.             document.write("audi.brandName : "+audi.getBrandName());  
  21.             document.write("<br><br>");  
  22.             document.write("bentlay.brandName : "+bentlay.getBrandName());  
  23.         </script>  
  24.     </head>  
  25. </html>  
By using this approach we have to define the function getBrandName() separately to every object.
 
Example 3
  1. <html>  
  2.     <head>  
  3.         <script>  
  4.             function Car(name)  
  5.             {  
  6.                 this.brandName = name;  
  7.             }  
  8.   
  9.             Car.prototype.getBrandName = function()  
  10.             {  
  11.                 return this.brandName;  
  12.             }  
  13.   
  14.             var volksvagen = new Car("VolksVagen");  
  15.             var audi = new Car("Audi");  
  16.             var bentlay = new Car("Bentlay");  
  17.   
  18.             document.write("volksvagen.brandName : "+volksvagen.getBrandName());  
  19.             document.write("<br><br>");  
  20.             document.write("audi.brandName : "+audi.getBrandName());  
  21.             document.write("<br><br>");  
  22.             document.write("bentlay.brandName : "+bentlay.getBrandName());  
  23.         </script>  
  24.     </head>  
  25. </html>  
Name of the constructor function is Car.
 
We are associating the function getBrandName() in Car object using prototype property.
 
It doesn’t matter how many objects we create. The function getBrandName() has only one instance loaded into memory. Prototype objects also allow you to override functions if required.
 
Output will be,
 
Prototype In JavaScript
 
Prototype In JavaScript
 
Prototype In JavaScript
 
*figure_prototype_Explanation
 
Prototype In JavaScript 
 
function Object(){} is always created by Javascript
 
Based on the above example,
 
Inspect Element.
 
Prototype In JavaScript
 
Prototype In JavaScript 
 
Use of Object.create to define the prototype using existing prototype.
  1. <html>  
  2.     <head>  
  3.         <script>  
  4.             function Car(){}  
  5.             Car.prototype.getBrandName = function()  
  6.             {  
  7.                 return "NoBrand";  
  8.             }  
  9.   
  10.             Car.prototype.getPrice = function()  
  11.             {  
  12.                 return "10L"  
  13.             }  
  14.             Car.prototype.color = "Red";  
  15.   
  16.             function Audi(){}  
  17.             Audi.prototype = Object.create(Car.prototype);  
  18.             Audi.prototype.getBrandName = function()  
  19.             {  
  20.                 return "Audi";  
  21.             }  
  22.   
  23.             function BMW(){}  
  24.             BMW.prototype = Object.create(Audi.prototype);  
  25.             BMW.prototype.color = "Green";  
  26.   
  27.             var audiObj = new Audi();  
  28.             var bmwObj = new BMW();  
  29.   
  30.         </script>  
  31.     </head>  
  32. </html>  
Prototype In JavaScript 
 

Object __proto__ and prototype chaining

 
Using the above example with inspect element,
 
Prototype In JavaScript 
 
For better understanding refer to figure_prototype_Explanation image. You have to go through the image properly to get things more clear.
 
Methods and properties like “getBrandName()” and “color” are being used according to the chaining.
 
Based on the immediate accessing from bottom to top the method/property will be accessed as immediate as found. Otherwise, it will be undefined if not found.
 

Summary

 
You can refer to the above example where the color “Green” is being printed for bmwObj.color and “Audi” is being printed in case of calling bmwObj.getBrandName().
 
Thank you.


Similar Articles