Javascript Inheritance

October 13th, 2007
Goto comments Leave a comment

If you’ve ever delved into using classes and the OOP paradigm in Javascript, you may have wondered how in the world one can create new classes that inherit the properties and methods from another class. This is known as inheritance. Javascript doesn’t actually have any formal language constructs to accomplish this, but it does have support for this. It’s just not readily apparent. It is even LESS apparent how to perform tasks such as calling the parent constructor or base methods.

So let’s say you have a class that defines an employee. The employee has a name, a department, and a function called “work” that will alert you to how much work they are doing. It looks like this:

  1. function IEmployee(name, department)
  2. {
  3.   this.IEmployee = this;
  4.  
  5.   this.name = name;
  6.   this.department = department;
  7.  
  8.   this.work = function()
  9.   {
  10.     alert(this.name + ‘ is working for 8 hours in the ‘ + this.department + ‘ department.’);
  11.   }
  12. }

This class would allow you to create a new employee that has a name, a department and a function that will declare to the world how much they work! That would look like this:

  1. adam = new IEmployee(‘Adam’, ‘Code’);
  2. adam.work();

That would spit out an alert telling everyone that I do a hard 8 hours of work a day baby! And please note the line ‘this.IEmployee = this;’. That is critical to facilitate inheritance. This gives child classes the ability to reference THIS class as its parent, including all its methods.

Ok, so that’s fine and dandy. Now let’s say that later down the road you want to create a class for managers. They too have a name, and a department, but they work differently. Ok, let us create a new class, using IEmployee as its base.

  1. function IManager(name, department)
  2. {
  3.   this.IManager = this;
  4.  
  5.   // Call the base constructor.
  6.   IEmployee.call(this, name, department);
  7.  
  8.   this.work = function()
  9.   {
  10.     alert(this.name + ‘ is telling peeps what to do for 6 hours in the ‘ + this.department + ‘ department.’);
  11.   }
  12. }
  13. IManager.prototype = new IEmployee;

Allright. A few things different here. First, the constructor code actually calls its PARENT constructor (’IEmployee.call(this, name, department);’). This lets the original constructor do all the work, as we have nothing new to add to this constructor.

Notice that this class has a ‘work’ function too. What we’ve done here is overridden the parent class’s ‘work’ function with our own. Why? Cause managers don’t work like regular employees. Duh! So NOW when you call the ‘work’ function, you get something different than what the parent defined.

The other thing to notice is this line: IManager.prototype = new IEmployee. This line basically tells Javascript that when you instantiate a new instance of the IManager class, grab all the properties and methods from IEmployee as well. THIS is the key to Javascript inheritance.

The next thing I will demonstrate is how to call a base class’s method. Remember when I said that the line ‘this.IEmployee = this;’ was important? That’s because if you want an ancestor class to be able to reference back to a parent’s methods, this variable gives you just that. Javascript has no inherent method to do this, so this little hack works just fine. :)

We are also going to introduce a new property for this class. Sales people have a quota, so we will make that part of the constructor. We will also add a new function called ’sell’ that can be used in place of ‘work’. The sell function will not only show this employee working, but that they’ve come closer to meeting
their quota. So here we go:

  1. function ISalesPerson(name, department, quota)
  2. {
  3.   this.ISalesPerson = this;
  4.   this.expectedQuota = quota;
  5.   this.currentQuota = 0;
  6.  
  7.   IEmployee.call(this, name, department);
  8.  
  9.   this.sell = function(dollarAmount)
  10.   {
  11.     if (this.currentQuota < this.expectedQuota) this.currentQuota += dollarAmount;
  12.     this.IEmployee.work();
  13.     alert(‘Quota: ‘ + this.currentQuota + ‘ of ‘ + this.expectedQuota);
  14.   }
  15. }
  16. ISalesPerson.prototype = new IEmployee;

Please note that when you call the ’sell’ function, it goes back and calls the base class’s ‘work’ function, and THEN we alert the sales person’s quota information.

I hope this has given a bit of insight into the OOP world of Javascript, and enough information to do your own personal research, and spread the OOP love to the world!

You must be logged in to post a comment.