Post
Ask Question

JavaScript Prototypes And Inheritance

Introduction 

 
In this blog, I will be explaining function prototype and instance __proto__ properties and how it is defined by JS.
 

Function prototype

 
A function's prototype is the object instance that will become the prototype for all objects created using this function as constructor. 
 

Object prototype

 
An object's prototype is the object instance from which the object is inherited.
 
Let's refer the below training function example to understand how prototype property is defined for JS function.
 
 
Every function is JS have prototype property and objects of those functions have __proto__ property which points to the respective functions.
  1. function Training(name, version) {  
  2.     this.name = name  
  3.     this.version = version  
  4. }  
  5. let csharp3 = new Training("c#", "3.0")  
  6. console.log(csharp3.__proto__)  // points to Training function
  7. console.log(Training.prototype) // points to Training function 
You can modify only object prototype without impacting function level. changing one object prototype does not impact other function objects.
  1. csharp3.__proto__.hour = "10"  
  2. console.log(csharp3.__proto__) // only this instance have hour property  
  3. let csharp6 = new Training("c#", "6.0")  
  4. console.log(csharp6.__proto__) // this instance does not have hour as property hour was not applied at function level.  
Modifying function level prototype which will be applied to all objects. JS object first checks the property at object level if not present then it requests for __proto__ to get the property.
  1. Training.prototype.price = "$50" // changing function level prototype will create new pointer and  
  2.                                  //will be applied to all new instance of this function  
  3. console.log(csharp6.price)  // display $50
  4. console.log(csharp3.price)  // display $50
Overriding function prototype,
  1. csharp6.price = "$100" // only this instance will have price with override value $100.  
  2. console.log(csharp6.price)  
Inheritence at function level,
  1. function AdvanceTraning(name, version, price) {  
  2.     Training.call(this, name, version) // call base function.  
  3.     this.price = price  
  4. }  
  5. AdvanceTraning.prototype.RevisedPrice = function() {  
  6.     return "$120"  
  7. }  
  8. let netcore3 = new AdvanceTraning(".net core", "3.0", "$60")  
  9. console.log(netcore3.RevisedPrice);  // you can access all base function proerties like name version etc.
Each function and object have __proto__ property and using that you can identify the parent. the base of all object __proto__ will be object,
  1. console.log(netcore3.__proto__) // proto is training  
  2. console.log(netcore3.__proto__.__proto__) // one level up proto i.e. training.proro i.e. object  
  3. console.log(netcore3.__proto__.__proto__.__proto__) // object proprto i.e. null  
Creating prototype with classes,
  1. class Training  
  2. {  
  3.     constructor(name, version)   
  4.     {  
  5.         this.name = name  
  6.         this.version = version  
  7.     }  
  8. }  
  9. class AdvanceTraning extends Training  
  10. {  
  11.     constructor(name, version, price)   
  12.     {  
  13.         super(name, version)  
  14.         this.price = price  
  15.     }  
  16. }  
  17. let netcore3 = new AdvanceTraning(".net core", "3.0", "$50")  
  18. console.log(netcore3.__proto__)  // pointing to training class.
 

Conclusion

 
In this blog, we studied, JavaScript Prototypes and Inheritance