JavaScript nested 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

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.

Answer 2

The usual approach to this is to separate instantiation from initialization. That way, you can defer initialization to the point where your subclass has actual arguments to work with. Of course, the downside of doing that is that barring your putting controls around it, you can have instances with invalid states. One of the purposes of passing arguments to constructors, after all, is that sufficiently invalid arguments can be dealt with by throwing exceptions, preventing the caller from having a reference to an invalid instance.

Here, that would look something like this (but don't be put off, keep reading, there are ways to improve it):

// base class
var Item = function() {
    this.initialize.apply(this, arguments);
};
Item.prototype.initialize = function( type, name ) {
    this.type = type;
    this.name = name;
};

// actual class (one of many related alternatives)
var Book = function() {
    this.initialize.apply(this, arguments);
};
Book.prototype = new Item();
Book.prototype.initialize = function( title, author ) {
    Item.prototype.initialize.call(this, 'book', title);
    this.author = author;
};

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

(Edit: The above was off-the-cuff; check out AnthonyWJones's answer for a much more terse version with a clever twist on initialization, although it doesn't demonstrate supercalls, which will still be as awkward as the above.)

As you can see, you end up doing a fair bit of typing to get all this done, and supercalls (calls to the superclass) are to be blunt fairly ugly. (Also, just using the arguments array in a function slows it down markedly in some implementations.) That's why you end up with helpers in libraries like Prototype, Resig's implementation, etc.

A number of those helper approaches, though, introduce a lot of inefficiency, use of never-standardized language features (Function#toString, for instance), and/or cause incompatibility with the new "strict" mode of JavaScript. I've written up a blog post showing how to do this rather more tersely whilst keeping supercalls efficient and strict-compliant.

Regarding doing away with new: I wouldn't, but I wouldn't call doing so being a newbie working against the language -- Crockford advocates not using it, for instance, and he's no newbie. To my mind, though, there's no reason to avoid it. The reasons people sometimes give are just around newbies making mistakes related to it, which you don't immediately seem likely to and which in any case just indicate that the newbies need to be mentored a bit.

Answer 3

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 4

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.