JavaScript’s “super” Pattern

Most other languages make it easy to call the “super” function when you override method – to call the original method that you are overriding. JavaScript, unfortunately, doesn’t have a “super” or “base” or anything like that at this point.There are ways around this, though, all of which involve getting a reference to the prototype of your type, and calling the method directly.

The Super Pattern

The “super-method” pattern is where you call the parent type’s method from your own method. For example, overriding the toJSON method of a model:

var MyModel = Backbone.Model.extend({

  // a super-method
  toJSON: function(){

    // call the "super" method - 
    // the original, being overriden
    var json = Backbone.Model.prototype.toJSON.call(this);

    // manipulate the json here
    return json;
  }
});

This will call the toJSON method of the type from which the new type was extended. It’s a little more code than other languages, but it still gets the job done.

There are a lot of different ways to get to and call the methods of a prototype object. If you’d like to learn more, check out my triple pack of screencasts covering Scope, Context and Objects & Prototypes.

Also be sure to check out my Building Backbone Plugins e-book, from which this post was taken.


Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Derick Bailey

Derick Bailey is an entrepreneur, problem solver (and creator? :P ), software developer, screecaster, writer, blogger, speaker and technology leader in central Texas (north of Austin). He runs SignalLeaf.com - the amazingly awesome podcast audio hosting service that everyone should be using, and WatchMeCode.net where he throws down the JavaScript gauntlets to get you up to speed. He has been a professional software developer since the late 90's, and has been writing code since the late 80's. Find me on twitter: @derickbailey, @mutedsolutions, @backbonejsclass Find me on the web: SignalLeaf, WatchMeCode, Kendo UI blog, MarionetteJS, My Github profile, On Google+.
This entry was posted in Backbone, Javascript, Principles and Patterns, Prototypal Inheritance. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Fredrik

    I much prefer to use

    var json = Backbone.Model.prototype.toJSON.apply(this, arguments)

    since that will forward arguments (of any arity) to the super call.

    • http://mutedsolutions.com Derick Bailey

      ++

      i generally do this, too. in some situations where i know the argument list is pre-defined (like .toJSON), I won’t bother with the apply/call invoking

  • Brett

    I prefer

    this.constructor.__super__.toJSON.apply(this, arguments);

    Less potential refactoring without the hardcoded class names

    • Ivan

      Using __super__ is definitely better.

      • gbsice

        __super__ only exists for Coffeescript compatibility and I recall reading that it should not be used directly in javascript methods.

  • Ansman

    This won’t actually work since you’re not passing a context to the toJSON function.

    The toJSON function simply does this: return _.clone(this.attributes);

    So what you’re doing is basically json = _.clone(Backbone.Model.prototype.attributes) which is undefined

    • http://mutedsolutions.com Derick Bailey

      #facepalm – typo… i added the .call so it will work :D thanks!

      • Ansman

        No problem! :)