Inheritance in JavaScript using methods prototype Chaining

In the below post we are going to see how we can achieve inheritance behavior using method prototype. For this I am going to create three method constructors:-
below is the Person method constructor :-

function Person () {
    this.firstName="";
    this.lastName="";
    this.PhoneNo="";
 
    this.getFullName=function  () {    
        return this.firstName+ " "+ this.lastName;
    };    
};

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Then I am defining Employee method constructor

function  Employee () {
    // body...
    this.Salary=0.0;
    this.getSalary=function()
    {
        return this.Salary;
    };
};

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

after that I am defining Full Time Employee method constructor

function  FullTimeEmployee () {
    this.PaidLeave=0;
    this.getPaidLeaves=function()
    {
        return this.PaidLeave;
    };
};

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Now we have three separate method constructors created ,lets link them

Employee.prototype=new Person();
Employee.prototype.constructor=Employee; // reset Constructors
 
FullTimeEmployee.prototype=new Employee();
FullTimeEmployee.prototype.constructor=FullTimeEmployee; // reset FullTimeEmployee Constructors

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

In the above code I am first assigning the function prototype property to new object of the function which I want as parent. after that I am resetting constructor for that function. for example , Employee.prototype=new person() is the line of code which set the employee’s function prototype to the new person object which will be treated as employee’s parent object and then Employee.prototype.constructor=employee is resetting the constructor for the employee function. and we are done, now the new employee object will have all the properties and methods of employee function as well as person function.

Lets see how it behave in the browser debug console.

image

So, in the above post we achieved inheritance using methods prototype. Lets understand prototype chaining, so as we know every function has a prototype property and when we create a new object of that function, the new object keeps link of its prototype in the __proto property. for example, here the object fullTEmp is object of FullTimeEmployee, so this object will keep its prototype Employee in the __proto secret property this chain goes till Object . This is called prototype chaining. 

image

Hope you find that post useful, Thanks for reading . Happy Coding.  🙂

Advertisements

One thought on “Inheritance in JavaScript using methods prototype Chaining

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s