JavaScript multilevel inheritance

Question

I've been trying to get my head around JavaScript inheritance. Confusingly, there seem to be many different approaches - Crockford presents quite a few of those, but can't quite grok his prose (or perhaps just fail to relate it to my particular scenario).

Here's an example of what I have so far:

// base class
var Item = function( type, name ) {
    this.type = type;
    this.name = name; // unused
};

// actual class (one of many related alternatives)
var Book = function( title, author ) {
    this.name = title; // redundant (base class)
    this.author = author;
};
Book.prototype = new Item('book'); // duplication of "book"

// instances
var book = new Book('Hello World', 'A. Noob');

This approach leaves me with a fair amount of redundancy, as I cannot delegate instance-specific attributes to the base class (at the time of prototype assignment, the attribute value is unknown). Thus each subclass has to repeat that attribute. Is there a recommended way to solve this?

Bonus question: Is there a reasonable way to avoid the "new" operator, or would that be regarded as a newbie working against the language?

Answer 1

Is there a reasonable way to avoid the "new" operator

What you really want to do is create a JavaScript object that has Item.prototype in its prototype chain. But you don't want to call the Item constructor function, because that makes no sense: you're not instantiating Item, you're just making a subclass.

You do have to use new one way or the other to get that prototype chain, but you don't have to use Item to get the prototype. You can create a new non-constructor function with the same prototype but no action, which base classes can call when they don't actually want to instantiate an object:

function Item(type) {
    this.type= type;
};

function Book(title, author) {
    Item.call(this, 'book');
    this.name= title;
    this.author = author;
};
function Item_nonconstructor() {}
Item_nonconstructor.prototype= Item.prototype;
Book.prototype= new Item_nonconstructor();

You can factor this out to be a bit less ugly in a number of ways, for example:

Function.prototype.subclass= function(base) {
    var c= Function.prototype.subclass.nonconstructor;
    c.prototype= base.prototype;
    this.prototype= new c();
};
Function.prototype.subclass.nonconstructor= function() {};

function Book(title, author) {
    Item.call(this, 'book');
    this.name= title;
    this.author = author;
};
Book.subclass(Item);

Or, you could consider moving your constructor stuff to an initialiser function, or various other approaches. There's no single accepted class/instance system in JavaScript. See this question for a long discussion of JavaScript object models.

Answer 2

I'll show you how I achieve this sort of thing:-

 function Item(type, name)
 {
    if (arguments.length > 0)
    {
        this.type = type;
        this.name = name;
    }
 }

 function Book(title, author)
 {
   Item.call(this, "book", title);
   this.author = author;
 }
 Book.prototype = new Item();

So a couple of things I'm doing here, I skip some initialisation code in the base class when I detect a new instance is being created simply as prototype.

The real enabler that avoids your duplication is to use Item.call as a base class constructor. This avoids the duplication you have in the original.

As to avoiding new it would help if you indicate why you would want to? However a simple way is to add a function to the "Class function" directly rather than to the prototype of the function:-

Book.Create = function (title, author) { return new Book(title, author); }


var aBook = Book.Create("Code Complete 2", "Steve McConnell");

Although I see little gain here.

Answer 3

Here is an alternative way of having a deeper inheritance model:

//The functions we are going to use 
function A() {}
function B() {}
function C() {}
function D() {}
function E() {}

//set up the inheritance chain (order is important!)
D.prototype = new E();
C.prototype = new D();
B.prototype = new C();
A.prototype = new B();

//Add custom functions to each
A.prototype.foo = function() {
    console.log("a");
};
B.prototype.bar = function() {
    console.log("b");
};
C.prototype.baz = function() {
    console.log("c");
};
D.prototype.wee = function() {
    console.log("d");
};
E.prototype.woo = function() {
    console.log("e");
};

//Some tests
a = new A();
a.foo();
a.bar();
a.baz();
a.wee();
a.woo();

That gives you most of what you need. I've written a longer article about "nested inheritance in javascript" on my blog, which shows you how to define custom properties, static methods, static properties, etc.

Answer 4

I've never liked the base prototype approach either, John Resig (largest author of jQuery) has an alternative approach that I found much simpler, easier, and more natural looking coming from an OO background: Simple JavaScript Inheritance. Based on your comments (same thoughts I had) I'd really suggest taking a look.

If you don't like the style you're in, and it sounds like you're not that happy with it...change early. There are a few different options out there, there's rarely ever one way to do something in javascript.