A convenient 'super' method for Backbone.js

January 30, 2012 Max Brunsfeld

Inheritance in Backbone

Backbone.js comes with a minimalist OO inheritance framework similar to the one employed by CoffeeScript. Each base class has a static method called extend that is used to create a subclass, like this:

User = Backbone.Model.extend({
  // instance methods
},
{
  // class methods
});

extend returns a constructor whose prototype inherits from Backbone.Model.prototype. References to all of Backbone.Model’s static methods and properties (including extend) are copied to the new constructor.

Calling ‘super’

The constructor also receives a __super__ property, which references its superclass.

User.__super__ === Backbone.Model.prototype

This makes it possible to call super inside of a class or and instance method:

User.prototype.save = function(attrs) {
    this.beforeSave(attrs);
    User.__super__.save.apply(this, arguments);
};

CoffeeScript has a super keyword that compiles to the line above, but when using Backbone with plain javascript, its a little grating to have to type that out.

A small layer of convenience

I wrote this little super method (test-driven using jasmine) which saves me having to repeat the constructor’s name all over the place. You call it like this:

User.prototype.save = function(attrs) {
    this.beforeSave(attrs);
    this._super("save", arguments);
};

The second parameter to _super is the array of arguments to pass to the overridden method. This is to optimize for the common case of passing the arguments object straight through.

There’s no way to avoid having to repeat the method name like that, unless you wrap every method definition with a helper function that either passes the overridden method as a parameter (a la Prototype.js) or reassigns a hidden super property behind the scenes (like JS.Class or John Resig’s approach). These approaches won’t work with Backbone’s ultra-minimalist inheritance system.

About the Author

Biography

Previous
Pivotal Tracker Maintenance this Saturday (Feb. 4) at 9:00am PST (17:00 UTC)
Pivotal Tracker Maintenance this Saturday (Feb. 4) at 9:00am PST (17:00 UTC)

We've got a major update of Pivotal Tracker planned for this weekend, which requires downtime while we run ...

Next
Multi-Language, Multi-Framework, what about Multi-Cloud?
Multi-Language, Multi-Framework, what about Multi-Cloud?

Previously, developers had to put a lot of energy into preserving choice across operating systems and minim...

SpringOne Platform 2019 Presentations

Watch Now