February 18, 2001 - Establishing an Object Hierarchy

February 18, 2001 Establishing an Object Hierarchy Tips: February 2001 Yehuda Shiran, Ph.D. Doc JavaScript

function superClass() {
  this.bye = superBye;
  this.hello = superHello;
}
function subClass() {
  this.inheritFrom = superClass;
  this.inheritFrom();
  this.bye = subBye;
}
function superHello() {
  return "Hello from superClass";
}
  
function superBye() {
  return "Bye from superClass";
}
function subBye() {
  return "Bye from subClass";
}

Click here to invoke the following script that activates these objects:

var newClass = new subClass();
function printSub() {
  alert(newClass.bye());
  alert(newClass.hello());
}

Convince yourself that it is working correctly. The methods bye() and hello() are first defined in superClass(). The method bye() is being overridden in subClass(). The first two lines of subClass() does the original inheritance between the two classes. You first define the inheritFrom method, and then you call it:

this.inheritFrom = superClass;
this.inheritFrom();

The second method to establish a class hierarchy is by creating an object of the superclass and assign it as a prototype of the subclass object:

subClass.prototype = new superClass;

And the whole example is:

function superClass1() {
  this.bye = superBye1;
  this.hello = superHello1;
}
function subClass1() {
  this.bye = subBye1;
}
subClass1.prototype = new superClass1;
function superHello1() {
  return "Hello from superClass";
}
  
function superBye1() {
  return "Bye from superClass";
}
function subBye1() {
  return "Bye from subClass";
}

Click here to invoke the following script that activates these objects:

var newClass1 = new subClass1();
function printSub1() {
  alert(newClass1.bye());
  alert(newClass1.hello());
}

Convince yourself that you get the same results as before: bye() from subClass() and hello() from superClass().