Post
Ask Question

Inheritance and the Prototype Chain in JavaScript

Introduction

 
This article explains inheritance and the Prototype Chain in JavaScript. JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++), since it is dynamic and does not provide a class implementation (although the keyword class is a reserved keyword and cannot be used as a variable name). 
 
When it comes to inheritance, JavaScript only has one construct: objects. Each object has an internal link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. null, by definition, has no prototype and acts as the final link in this prototype chain. 
 
In JavaScript, a prototype is a property of a function and the object created by constructor functions. The prototype of a function is an object. Its main use is when a function is used as a constructor.
 
Prototype and property of the function  
 
In this example, we will understand the concept of property and a prototype of a class. Have a look at the following example.
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4. </head>    
  5. <body>    
  6. <form id="form1" runat="server">    
  7.         <script>    
  8.             function student(name,surname) {    
  9.                 //Property of student function    
  10.                 this.name = name;    
  11.                 this.surname = surname;    
  12.             }    
  13.             var p = new student('Rama','Sagar');    
  14.             console.log(p.name);    
  15.             console.log(p.surname);    
  16.      
  17.         </script>    
  18.     </form>    
  19. </body>    
  20. </html>   
Prototype and property of function
 
Adding property in run time 
 
We can add an additional property of a function when the object is created. In this example we are adding a "place" property with a person object at run time. Here is a sample example.
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4. </head>    
  5. <body>    
  6. <form id="form1" runat="server">    
  7.         <script>    
  8.             function employee(name,surname) {    
  9.                 //Property of employee function    
  10.                 this.name = name;    
  11.                 this.surname = surname;    
  12.                     
  13.             }    
  14.             var p = new employee('Sagar', 'Pulidindi');    
  15.             employee.prototype.place = "Hyderabad";    
  16.             console.log(p.name);    
  17.             console.log(p.surname);    
  18.             console.log(p.place);    
  19.      
  20.         </script>    
  21.     </form>    
  22. </body>    
  23. </html>   
Adding property in run time
 
Inherit property of function to another function. 
 
In the following example, we will see inheritance in JavaScript. We will inherit a few properties of a function in another function.
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4. </head>    
  5. <body>    
  6.  <form id="form1" runat="server">    
  7.         <script>    
  8.      
  9.             function oil(name, type) {    
  10.                 this.name = name,    
  11.                 this.type = type    
  12.             }    
  13.             function localoil(name,type,location) {    
  14.                 oil(name, type);    
  15.                 this.location = location;    
  16.             }    
  17.      
  18.             oil.prototype = localoil.prototype;    
  19.      
  20.             localoil.prototype.ShowOils = function () {    
  21.      
  22.                 console.log("Name:- " + name);    
  23.                 console.log("Type:- " + type);    
  24.                 console.log("Location :- " + this.location);    
  25.             }    
  26.      
  27.             var o = new localoil('Olive', 'Oil','kerala');    
  28.             o.ShowOils();    
  29.      
  30.         </script>    
  31.     </form>    
  32. </body>    
  33. </html>   
 
Inherit property of function
 

Summary

 
In this article, we learned about properties and inheritance in JavaScript. In future articles, we will learn a few more interesting concepts in JavaScript.


Similar Articles