Back to: JavaScript Tutorial For Beginners and Professionals
Prototypical Inheritance in JavaScript
In this article, I am going to discuss Prototypical Language and Prototypical Inheritance in JavaScript with Examples. Please read our previous article where we discussed how to create JavaScript objects using Literal and Constructor Functions.
What do you mean by Prototypical Language?
Please say JavaScript is a Prototypical Language. Then the question is what do you mean by Prototypical Language? Prototype means there is some kind of base or model based on which things are created. For example, this is a car and this car is based on that model. In object-oriented programming, this termed as Inheritance. That means you have some kind of base parent and from which you create Childs. For better understanding, please have a look at the below image.
In Object-Oriented Programming languages like C#, Java, people create classes and then inherited the classes something like below. So, in programming languages like C# and Java, they use class-based inheritance. They have a class and to create the different flavors of that class, they inherited the parent class and create child classes.
In JavaScript, we don’t have a class-based inheritance. JavaScript follows the object-based inheritance model.
What do you mean by Object-Based Inheritance?
Let us understand what do you mean by Object-Based inheritance in JavaScript with an example. First, we need to create one constructor function. We discussed the constructor function in detail in our previous article. First, create the following Constructor function. As you can here, we created the constructor function Employee with two members i.e. Name and Company.
Once the constructor function is created, then you can create an object of that constructor function and attach as many functions as you want. For a better understanding of this, please have a look at the below image. As you can see in the below image, first we created an object of the Employee constructor function and to that object (ChildEmployee1) we attach one function called Fun1.
You can create as many as child objects you want. For example, you can create another child object of the Employee and you can also add another function to it. For better understanding, please have a look at the below image. Here, we are creating a new instance of the Employee constructor function and attaching a new function i.e. Fun2 to it.
Example:
What we discussed above is given in the below example.
<html> <head> <title>JavaScript Prototypical Inheritance Example</title> </head> <body> <script> function Employee() { this.Name = ""; this.Company = "DotNetTutorials"; }; var ChildEmployee1 = new Employee(); ChildEmployee1.Fun1 = function(){ this.Name = "Anurag"; console.log("Fun1 Function"); console.log("Name : " + this.Name); console.log("Company : " + this.Company); }; var ChildEmployee2 = new Employee(); ChildEmployee2.Fun2 = function(){ this.Name = "Mohanty"; console.log("Fun2 Function"); console.log("Name : " + this.Name); console.log("Company : " + this.Company); }; ChildEmployee1.Fun1(); ChildEmployee2.Fun2(); </script> </body> </html>
Output:
In JavaScript, we don’t have the class-based inheritance. We have the object-based inheritance. That is, we will create an object and to that object, we can add new functions and properties. For a better understanding, please have a look at the following diagram.
People say JavaScript is a Prototypical language because we create one object and from that object, we create different flavors of that object. The above implementation is fine for small projects. But what if we want to add multiple functions.
How to Add Multiple Functions in Object-Based Inheritance?
Let us understand this with an example. We want to perform CRUD operations on the Employee object. Then how we can do this? We can do this by using the prototype. For example, we have the following Employee Constructor function.
Now what we want is, we want to perform the CRUD operations on the Employee object. To do so, what we need to do is, we need to create another constructor function with four methods as shown in the below image.
Next, we need to set that the EmployeeCRUD is a prototype of Employee so that we can access the properties declared in the Employee Constructor function. To do so, we need to set the prototype of EmployeeCRUD as the object Employee constructor function as shown below.
Once you set the Prototype, now you can create an object of the EmployeeCRUD constructor and can access the properties and methods which are defined in both Employee and EmployeeCRUD constructor as shown in the below image.
The complete example is given below.
<html> <head> <title>JavaScript Prototpe Example</title> </head> <body> <script> function Employee() { this.Name = ""; this.Salary = ""; }; function EmployeeCRUD() { this.AddEmployee = function(){ console.log("Employee Added Name: " + this.Name); } this.UpdateEmployee = function(){ console.log("Employee Updated Name: " + this.Name); } this.GetEmployeeDetails = function(){ console.log("Fetch Employee Details Name: " + this.Name); } this.DeleteEmployee = function(){ console.log("Employee Deleted Name: " + this.Name); } }; EmployeeCRUD.prototype = new Employee(); var empCrud = new EmployeeCRUD(); empCrud.Name = "Anurag"; //Access the Parent Property empCrud.Salary = 10000; //Access the Parent Property empCrud.AddEmployee(); //Calling the Child Method empCrud.UpdateEmployee(); //Calling the Child Method empCrud.GetEmployeeDetails(); //Calling the Child Method empCrud.DeleteEmployee(); //Calling the Child Method </script> </body> </html>
Output: When you run the above code, you will get the following output in the browser console window.
Now, let us understand what exactly is prototype object.
What is Prototype Object in JavaScript?
Every JavaScript object has a Prototype. A Prototype is a simple object which points to another object. In our example, the EmployeeCRUD is a prototype object which points to the Employee object. The following line of code does the same.
EmployeeCRUD.prototype = new Employee();
Note: The prototype object in JavaScript follows method chaining.
What do you mean by Method Chaining in JavaScript?
Let us understand what is Method chaining and how the prototype object follows this method chaining concept in JavaScript. When we invoke any method, first it will try to find the method in the current object and if it is not found in the current object, then it will search the method in the prototype object (prototype object means the other object it points to) and if it is found there then it will invoke the method and if it is not found there then it will through an error. For better understanding, please have a look at the below image.
Example: JavaScript Prototype Method Chaining Example
Let us see an example to understand the JavaScript Prototype Method Chaining. In the below example, the AddEmployee and UpdateEmployee methods are present in the EmployeeCRUD constructor and hence these methods are invoked from here only. The GetEmployeeDetails method is going to be invoked from the Employee constructor. The DeleteEmployee method neither present in EmployeeCRUD or in Employee and hence this will give an error.
<html> <head> <title> JavaScript Prototype Method Chaining Example </title> </head> <body> <script> function Employee() { this.Name = "Anurag"; this.Salary = 10000; this.GetEmployeeDetails = function(){ console.log("Fetch Employee Details Name: " + this.Name); } }; function EmployeeCRUD() { this.AddEmployee = function(){ console.log("Employee Added Name: " + this.Name); } this.UpdateEmployee = function(){ console.log("Employee Updated Name: " + this.Name); } }; EmployeeCRUD.prototype = new Employee(); var empCrud = new EmployeeCRUD(); empCrud.AddEmployee(); //Calling the Child Method empCrud.UpdateEmployee(); //Calling the Child Method empCrud.GetEmployeeDetails(); //Calling the Parent Method empCrud.DeleteEmployee(); //Error </script> </body> </html>
Output:
This method chaining concept in JavaScript is termed Prototypical Inheritance in JavaScript. In the next article, I am going to discuss JavaScript Closures with Examples. Here, in this article, I try to explain Prototypical Inheritance in JavaScript with Examples. I hope you enjoy this Prototypical Inheritance in JavaScript with Examples article.