Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Inheritance in JavaScript

Suggested Videos
Part 59 - Static members in JavaScript
Part 60 - Prototype in JavaScript
Part 61 - Overriding JavaScript functions



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.

<script type="text/javascript">
    // 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
</script>

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.

<script type="text/javascript">
    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
</script>

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

<script type="text/javascript">
    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') + "<br/>");
    document.write("Employee.annualSalary: " +
                     employee.hasOwnProperty('annualSalary') + "<br/><br/>");

    document.write("PermanentEmployee.name: " +
                     pe.hasOwnProperty('name') + "<br/>");
    document.write("PermanentEmployee.annualSalary: " +
                     pe.hasOwnProperty('annualSalary') + "<br/>");
</script>

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

PermanentEmployee.name: false
PermanentEmployee.annualSalary: true

JavaScript tutorial

2 comments:

  1. Hi venkat,
    your video tutorial is awesome.can you please publish one javascript tutorial which shows a real time projet.
    Thanks,
    Gaurav

    ReplyDelete
  2. can you provide slider for inheritance-in-javascript

    ReplyDelete

It would be great if you can help share these free resources