Backbone is best known as a lightweight framework for creating JavaScript web applications, but there’s one aspect of Backbone that deserves particular attention: its simple syntax for class-based inheritance.

Note: When I mention the extend() function, I’m referring to Backbone’s self-propagating extend() (used for class inheritance), not to Underscore’s extend() (used to copy properties between objects).

For example, you can easily create a new model subclass by calling extend() on Backbone.Model and supplying the instance members:

var Person = Backbone.Model.extend({
    greet: function () {
        alert('Hello there!');
    }
});

The catch is that extend() is available only when you subclass one of a handful of Backbone classes: Model, View, Controller, or Collection. That’s a little disappointing if you want to create a class that doesn’t need the functionality provided by any of those classes.

Our solution was to create Toolbox.Base. Toolbox.Base borrows Backbone’s class inheritance code and exposes it as a simple primitive base class that can be used to create any kind of class we want. You can find Toolbox.Base on GitHub.

Let’s take a closer look at using Toolbox.Base.

Basic Usage

var Animal = Toolbox.Base.extend({
    constructor: function (name) {
        this._name = name;
    },
    sayName: function () {
        alert('Hi, my name is ' + this._name);
    }
});

var Lion = Animal.extend({
    constructor: function (name) {
        Lion.__super__.constructor.call(this, name);
        this._lionName = name + ', the lion';
    },
    roar: function () {
        alert(this._lionName + ' ROARS!!!');
    }
});

var george = new Lion('George');
george.sayName(); // displays: "Hi, my name is George"
george.roar(); // displays: "George, the lion ROARS!!!"

constructor Method
If provided, the constructor method will be used as the constructor function for the class. It will receive the arguments used to instantiate a new object. In the example above, new Lion('George') meant that Lion‘s constructor method received the name ‘George’ as its one and only argument.

__super__ Property
SomeClass.__super__ is a reference to the parent class prototype. It lets you access the original version of an overridden method without having to reference the parent class' actual name.

var FerociousLion = Lion.extend({
    sayName: function () {
        alert('Fear me!!!');
        FerociousLion.__super__.sayName.call(this);
    }
});
var charles = new FerociousLion('Charles');

// Will display 2 messages:
// "Fear me!!!"
// "Hi, my name is Charles"
charles.sayName();

Static Members
extend() also takes an optional second argument containing the static members that should be available on the class itself:

var TestClass = Toolbox.Base.extend({
    instanceMethod1: function () { ... },
    instanceMethod2: function () { ... }
}, {
    staticMethod1: function () {
        alert('First static method');
    },
    staticMethod2: function () { ... }
});

TestClass.staticMethod1(); // displays: "First static method"

Start Making Classes!
Whether you use our Toolbox.Base class (you can change the namespace or modify it however you want) or create your own (Backbone's internal ctor(), inherits(), and extend() functions are what you need), Backbone's class-inheritance abstraction should be a standard part of any JavaScript toolbox.

If you like this post, you should it out.