Static News Archive

   (5-Mar-09 14:54)  Javascript inheritance - forget the other stuff...
Javascript inheritance.
Forget all of the other implementations - Forget prototyping, forget chaining, forget closure.

In essence, inheritance is about "Give my object the public methods and properties of my parent".

So let's just do that:

// Any object that wants to be inheritable should inherit from BaseObject
function BaseObject() {

/* Call this to inherit from an object.
--The call to this must be at the bottom of your class,
otherwise your properties will not be copied when
someone inherits from your class...--
This will copy all properties from the base class you are inheriting from,
to your derived class.
this.Inherit = function(derivedClass) {
for (key in this) {
// The derived class doesn't have this method - so copy it FROM the parent class
if (typeof(derivedClass[key]) == 'undefined') {
derivedClass[key] = this[key];
else {
// The dervied class has its own implementation -
// so copy it TO the parent, and up the hierarchy
// until the parent doesn't implement the key
parentClass = this;
while (parentClass != null && parentClass[key] != 'undefined') {
parentClass[key] = derivedClass[key];
parentClass = parentClass.__Parent;
derivedClass.__Parent = this; // Assign the parent property to our derived class
return this;

/* call GetName to get the name of an inheriting object */
this.GetName = function() {
if (typeof this != "object" || this === null) return "";
return /(w )(/.exec(this.constructor.toString())[1];

Right - there's our base object. It has a single method which will copy all of the properties from one object to another.
If a property is being overridden in a derived object, the "if (typeof" call sorts that out, by only copying undefined properties.

Ok, so heres a derived class:

function BasePage(sPageName) {

var m_sMyPageName = sPageName;

/* SHOW is called every time any of our pages are shown
To extend the method, define your own Show() function
this.Show = function() {

/* HIDE is called every time any of our pages are hidden
To extend the method, define your own Hide() function
this.Hide = function() {

// Setup our inheritance
var m_oParent = new BaseObject().Inherit(this);


"But Wait!" I here you say - "What about passing arguments to our inherited class?"

Well - no problem:

function DerivedPage(sPageName, sPageTitle) {

var m_sPageTitle = sPageTitle;

/* Override our parent show function
this.Show = function() {
alert("i'm showing ok!");

/* Override our parent hide function
this.Hide = function() {
alert("bye bye...");

// Setup our inheritance - pass in our parent's expected argument: 'sPageName'
var m_oParent = new BasePage(sPageName).Inherit(this);


Want mulitple inheritance?
Well - no problem either - just call inherit against each of the objects you want to inherit from:

var m_oParent = new BasePage(sPageName).Inherit(this);
var m_oOtherParent = new OtherBasePage().Inherit(this);

So there you have it - Simple, concise, javsacript inheritance.

The only caveat is that the inherit call must be at the bottom of your class - but that's not really a big problem in my book.

Post a comment     

<-  (1-Mar-09 18:58)  Javascript Memory le... (3-May-09 17:52)  Internet explorer an...  ->