JavaScript · Programming · prototype

Object-Oriented Inheritance with JavaScript

JavaScript does not support an explicit inheritance operator the way Java or C++ do.

However, there are two ways to implement inheritance in JavaScript:

  1. Using functions . This is the classical way.
  2. Using Prototype. This is recommended and more powerful way of doing.

Inheritance through Functions

  1. Define super class.
  2. Define sub class.
  3. Assign the superclass object to one of the member method of the sub class.
  4. Call the superclass constructor function inside the subclass.


/*
Step 1 : define super class
*/
function superClass() {
this.sayHello = function(){alert('Hello SuperClass');}
this.sayMessage = function(){alert('Say Message SuperClass');}
this.name = 'superClass';
}

/*
Step 2: define sub class
a) assign the superclass object to one of the function object
b) call the superclass constructor inside the subclass
*/


function subClass()
{
//you can use any propertyname instead of parentClass eg superclass
this.parentClass = superClass;
this.parentClass(); // assigns the super class methods to subclass
this.sayHello = function(){alert('Hello SubClass');}
}

/* test */
function testSub() {
var sc = new subClass();
sc.sayHello();
sc.sayMessage();
}

Explanation

The explanation is pretty simple if you know the concept of “this” keyword in JS.
Remember that the ‘this’ keyword refers to the containing object.
So, when you call the following line, you have copied the entire superClass object to the subClass property parentClass.

this.parentClass = superClass;

Then when you call the following line the constructor of the ‘superClass’ is fired.

this.parentClass();

Now, inside the superClass function you have the following line:

this.sayHello = function(){alert('Hello SuperClass');}

What does ‘this’ refer to?
Since the enclosing object of ‘superClass’ is ‘subClass’, the ‘this’ keyword refers to it’s enclosing object i.e. “subClass”
and not the ‘window’ object. Therefore all the properties of ‘superClass’ get copied to the ‘subClass’.

Inheritance through Prototype

This is the most suitable method of implementing inheritance in JavaScript.

  1. The main advantage of this method is that the inheritance chain is dynamic i.e you can assign or remove new methods and properties to the super class that becomes available to the child class automatically.
  2. Also, JS natively supports prototypal inheritance and not class based inheritance.
  3. We can only do method overriding and not method overloading.

Steps:

  1. Create a super class.
  2. Attach all the callable methods of super class to it’s prototype. Important step!
  3. Create a sub class.
  4. Assign the subclass prototype object to the super class instance. This creates inheritance.
  5. Reset the constructor property for the sub class using ChildClassName.prototype.constructor=ChildClassName. This ensures that the objects created are of the sub class and not the super class.
  6. Call the super class methods using ClassName.prototype.methodName.call(this,parameters…). This will work only for methods added via the prototype.


/* create a super class */
function Person()
{
this.sayName = function(){alert("Person::sayName()");}
this.name = "Person";
}

//create the callable methods in super using it's prototype
Person.prototype.sayHello = function(name){alert("Person::sayHello()");}


/* create sub class */
function Student()
{
this.name = "Student";
this.sayName = function(){alert("Student::sayName()");}
}

/* derive the sub class from super class by using it's prototype */
Student.prototype = new Person;

/*Reset the constructor property for the subclass using it's prototype.constructor property*/
Student.prototype.constructor = Student;

//add new methods to the super class which become available to all the sub classes automatically
Person.prototype.sayNew = function(){alert("Person::sayNew()");}

//call super class method
Student.prototype.callParentMethod = function()
{
//call parent methods this will work because sayHello is part of the object prototype hierarchy
Person.prototype.sayHello.call(this);

//this NOT will work because sayName is NOT declared using the superclass prototype
Person.prototype.sayName.call(this); //error
}


function testProtoInherit()
{
var sc = new Student;
sc.sayHello();
sc.sayName();
sc.sayName('amit');
alert(sc.name);
sc.sayNew();
sc.callParentMethod();
}
testProtoInherit();

There is it is folks, the power of JS inheritance in the palm of your hand.

Advertisements

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