Calling Superclass Methods in JavaScript colorful lead photo

Update 2017-10-23: This is an older article and it still "works", especially if you need to support older browsers, but I would be remiss if I didn't mention that the new ES2015 classes have a perfectly functional `super()` operator.

Overriding a method and invoking the same method on the superclass is core technique in object-oriented programming. It's great: you automatically preserve the behavior of the superclass now and in the future. In JavaScript, the most straight forward way is to refer to the superclass's method directly and use apply() to pass it the current scope and arguments:

function Wagon() {}
subclass(Wagon, Vehical, {
    drive: function() {
        this.moveForward(3);
    }
});

function RickityWagon() {}
subclass(RickityWagon, Wagon, {
    drive: function() {
        this.clatter();
        return Wagon.prototype.drive.apply(this, arguments);
    }
});

No matter how Wagon's drive() method evolves - adding more complex logic, calling other methods, adding option arguments, returning a value - RickityWagon's drive() method will always behave the same way, just with additional clattering.

It may seem strange to refer to the superclass directly if you come to Java, but that's perfectly natural for those of us coming from C++. You see, in C++ you can have multiple base classes, so super.method is ambiguous, so you have to say which class you mean.

So that's superclass chaining. Pretty much everyone agrees that it's a good thing. Some people, however, think the obvious way, return SuperClass.prototype.method.apply(this, arguments), is too verbose and go looking for an easier way. I'd like to discuss of few of those approaches and why they don't quite work, and argue for sticking to the simple, explicit, and obvious way.

The first thing you'd think of is to put a super property on the class's prototype, so you could say something like this.super.drive. Unfortunately, this breaks down for more than one level of inheritance. If you call up to a superclass, and it tries to call up to it's superclass, it will end up calling back into itself, causing an infinite loop.

Resig's _super()

John Resig attacks this problem directly in his Class.extend utility:

prototype[name] = typeof prop[name] == "function" && 
    typeof _super[name] == "function" && fnTest.test(prop[name]) ?
    (function(name, fn){
      return function() {
        var tmp = this._super;

        // Add a new ._super() method that is the same method
        // but on the super-class
        this._super = _super[name];

        // The method only need to be bound temporarily, so we
        // remove it when we're done executing
        var ret = fn.apply(this, arguments);        
        this._super = tmp;

        return ret;
      };
    })(name, prop[name]) :
    prop[name];

His approach is very direct: when you call _super, swap out _super on the parent temporarily, and then put it back when you're done. Which is great, unless fn throws an exception, in which case it doesn't get put back. You could put a try/catch/rethrow around it, but that usually drops important stack trace information from the exception.

Using caller

There's another interesting way to implement super: relying on arguments.callee.caller. Using that, you could implemnt a superApply method that you call like so:

function RickityWagon() {}
subclass(RickityWagon, Wagon, {
    drive: function() {
        this.clatter();
        return this.superApply(arguments);
    }
});

superApply could use arguments.callee.caller to get a reference to the method it's inside, which you could link back to the overridden method on the superclass if you set up a link when creating the class. Let's say you detect overridden methods at class creation at set a parentMethod property on the overriding method. The superApply could be implemented as:

function superApply(args) {
    var pm = arguments.callee.caller.parentMethod;
    if ( pm ) return pm.apply(this, args);
}

There are a couple of problems with that. First of all, caller is deprecated: you really shouldn't be using it at all, and especially not for some merely convenient syntactic sugar. If an environment drops support for it altogether (and many JavaScript engines already provide a faster "strict" mode where callee is not supported) you'll have to change a lot of code to get it working again.

Second, this relies on behind-the-scenes stuff happening correctly at class creation. It pretty much ties you to one class creation mechanism. If anyone tries to modify the class on after the fact, they'll have to know about those magic properties.

Just Too Complex

Both those approaches are just too complex. They're hard to understand, hard to explain, and buggy in practice. They are, however the best solutions that top minds have come up with for implementing super starting from this. I certainly wasn't able to come up with anything nearly as good. As a result, I seriously doubt there is a clean way to make this work. My conclusion would be simply "don't do that."

A guy goes to a doctor and says, "every time I lift my arm like this, I get a sharp pain." So the doctor says, "don't do that."

Hanging Super on the Class

So, super behavior has to hang off the class. We're all in agreement on that, right? The only remaining question is if we should reference the superclass directly, or go through our own class. If we just hard-code in the name of the superclass, it looks like this:

return Wagon.prototype.drive.apply(this, arguments);

If on the other hand, we keep a reference to the superclass's prototype on the base class, say, _super, then we can write this:

return RickityWagon._super.drive.apply(this, arguments);

Not much difference, really, but some people prefer this so that it's easy to change the class later to have another base class. That's not a particularly common refactoring, in my experience, but it doesn't sound like a bad idea to configure the superclass in one place.

So what's not wrong with this, I ask? It's not unclear, is it? It's very, very clear. If you understand prototype, and you understand apply, this, and arguments... it's just so painfully obvious and clear. Is it so ugly, then? To me, the baroque alternatives are a thousand times uglier. Perhaps we should simply meditate on the lessons of this expression instead of trying to replace it with something barely more concise but opaque and fraught with hidden complexity. And if a beginner asks you what it means, perhaps you could encourage them to come to a deeper understanding of JavaScript by internalizing these fundamental concepts.

- Oran Looney May 24th 2011

Thanks for reading. This blog is in "archive" mode and comments and RSS feed are disabled. We appologize for the inconvenience.