Inheritance and Javascript

Time for a technical post.

Javascript is a ‘prototype’ based language, and it means that inheritance is a different animal in Javascript than it is to more normal object oriented languages. You’ll see a million different ways of doing what seems a very standard thing. There are quite a few inheritance patterns that I’ve found on the web, often even using large and complex libraries.

The commonly seen inheritance pattern (even in impressive reference tomes) is this:


function Parent( args ) {
// set up stuff
}
Parent.prototype.someMethod = function() { /* Do some work */ }
function Child( args ) {
// call the parents constructor with args
// then set up your own stuff.
}
Child.prototype = new Parent();
Child.prototype.someMethod = function() { /* Do some work */ }


This works, in that the prototype chain is set up and attributes and methods are inherited. Where it doesn’t work is that you had to construct a new Parent at the time of the Childs definition rather than instantiation. Often the parents constructor simply doesn’t make sense taken in isolation like this, besides the frustration of having to call it again when the child is instantiated.

One suggestion was to set the prototype of the Child to the prototype of the parent.


function Parent( args ) {
// set up stuff
}
Parent.prototype.someMethod = function() { /* Do some work */ }
function Child( args ) {
// call the parents constructor with args
// then set up your own stuff.
}
Child.prototype = Parent.prototype;
Child.prototype.someMethod = function() { /* Do some work */ }


But this doesn’t work because the prototypes are shared and the parents someMethod is corrupted by the client overriding it. But playing around the other day, we worked out a sneaky way around this, you can create an empty object which inherits from your parents prototype, and then inherit from that.

function Parent() { }
Parent.classconstructor = function() { /* An object to represent the class */ }
Parent.prototype = new Parent.classconstructor();
Parent.prototype.someMethod = function() { /* Do some work */ }
function Child() { }
Child.classconstructor = function() { /* An object to represent the class */ }
Child.classconstructor.prototype = Parent.prototype;
Child.prototype = new Child.classconstructor();
Child.prototype.someMethod = function() { /* Do some work */ }

A bit confusing maybe, but the inheritance chain is perfect, you don’t corrupt your parents prototypes when you assign methods to the Childs prototype.

You can wrap all this up into a utility method quite easily, which then doesn’t pollute your namespace.

function extend(clazz, superclass) {
	var intermediate = function() {};
	intermediate.prototype = superclass.prototype;
	clazz.prototype = new intermediate();
	// you can do other stuff here to set up
	// for example easy ways to call your super constructor,
	// or super methods, or convenient ways of finding
	// your own constructor.
}

and then you can use it very easily.


function Child() { }
extend ( Child, Parent );
Child.prototype.someMethod = function() { /* Do some work */ }


So, all you javascript geniuses out there on the internet, let me know – is this a good pattern, or are there hidden dangers?