Inheritance in JavaScript

Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2015/02/inheritance-in-javascript.html

In this video we will discuss Inheritance in JavaScript with an example.

Object oriented programming languages support inheritance. Since JavaScript is also an object oriented programming language, it supports inheritance.

In Object oriented programming languages like C# and Java to implement inheritance, a class inherits from another class. In JavaScript, we don’t have the concept of classes, so inheritance in JavaScript is prototype-based. This means to implement inheritance in JavaScript, an object inherits from another object. Let us understand this with an example.

// Employee will be the base object (Similar to base class in c#)
var Employee = function (name)
{
this.name = name;
}

// getName() function is added to the base object (Employee)
Employee.prototype.getName = function ()
{
return this.name;
}

// PermanentEmployee will be the derived object
var PermanentEmployee = function (annualSalary)
{
this.annualSalary = annualSalary;
}

// Use prototype to associate Employee as the base object for PermanentEmployee
PermanentEmployee.prototype = new Employee(“Mark”);

var pe = new PermanentEmployee(50000);
// Derived object (permanentEmployee) can see the base object (Employee) getName() method
document.write(pe.getName());
alert(pe instanceof Employee); // Returns true
alert(pe instanceof PermanentEmployee); // Returns true

Notice that the derived object (PermanentEmployee) can see the base object (Employee) getName() method. When getName() method is called, JavaScript first tries to find this method in the derived object (). It can’t find the method there so it goes to the parent object and finds it there.

If you add a new method to the parent object, it becomes available in the derived object.

var Employee = function (name)
{
this.name = name;
}

Employee.prototype.getName = function ()
{
return this.name;
}

// Adding getNameLength() method to the parent object
// which becomes available in the derived object
Employee.prototype.getNameLength = function ()
{
return this.name.length + ” characters”;
}

// PermanentEmployee will be the derived object
var PermanentEmployee = function (annualSalary)
{
this.annualSalary = annualSalary;
}

PermanentEmployee.prototype = new Employee(“Mark”);

var pe = new PermanentEmployee(50000);
// Call getNameLength() method added to the parent object
document.write(pe.getNameLength()); // Output : 4 characters

Use hasOwnProperty() method to determine if a property is defined on the actual object or it’s prototype. Here is an example.

var Employee = function (name)
{
this.name = name;
}

var PermanentEmployee = function (annualSalary)
{
this.annualSalary = annualSalary;
}

var employee = new Employee(“Mark”);

PermanentEmployee.prototype = employee;

var pe = new PermanentEmployee(50000);

document.write(“Employee.name: ” + employee.hasOwnProperty(‘name’));
document.write(“Employee.annualSalary: ” + employee.hasOwnProperty(‘annualSalary’));

document.write(“PermanentEmployee.name: ” + pe.hasOwnProperty(‘name’));
document.write(“PermanentEmployee.annualSalary: ” + pe.hasOwnProperty(‘annualSalary’));

Output :
Employee.name: true
Employee.annualSalary: false

PermanentEmployee.name: false
PermanentEmployee.annualSalary: true

source