My terminology is a bit off, so feel free to correct where necessary. I want to overload a function in javascript and the 'base class' to make use of the overloaded method as well as the inherited class to access the base classes methods. So far, I came up with a (working) mix of jquery.extend() and object literals, but this doesn't look pretty. I was wondering if there's a better way of doing this (can use jquery).

var Base = new function(args, m) {
   $.extend(this, m);
   var self = this;
   this.bar = function() {
     self.foo();
   }
   this.foo = function() {
     self.blah();
   }
   this.dosomething = function() {}
};

var Child = function(arg1) {
   $.extend(this, new Base(args, {
     blah: function() {
       self.dosomething()
     }
   }));
}

My terminology is a bit off, so feel free to correct where necessary. I want to overload a function in javascript and the 'base class' to make use of the overloaded method as well as the inherited class to access the base classes methods. So far, I came up with a (working) mix of jquery.extend() and object literals, but this doesn't look pretty. I was wondering if there's a better way of doing this (can use jquery).

var Base = new function(args, m) {
   $.extend(this, m);
   var self = this;
   this.bar = function() {
     self.foo();
   }
   this.foo = function() {
     self.blah();
   }
   this.dosomething = function() {}
};

var Child = function(arg1) {
   $.extend(this, new Base(args, {
     blah: function() {
       self.dosomething()
     }
   }));
}

• javascript
• jquery
• oop
• overloading
• object-literal

• 1 I suppose this is a mandatory resource – Alexander Commented Mar 9, 2013 at 1:10
• @Alexander , from that page: "I have been writing JavaScript for 8 years now, and I have never once found need to use an uber function. The super idea is fairly important in the classical pattern, but it appears to be unnecessary in the prototypal and functional patterns. I now see my early attempts to support the classical model in JavaScript as a mistake." – Benjamin Gruenbaum Commented Mar 9, 2013 at 1:30
• @BenjaminGruenbaum - I'm getting the idea you and Alexander are in agreement with Crockford that classical inheritance is a bad fit for Javascript, no? – Jared Farrish Commented Mar 9, 2013 at 1:34
• @JaredFarrish I think we are (In agreement), I was not arguing, I thought it would be nice to bring Crockford's conclusion from that page here so it will be more visible. It's probably the most important part of that page :) – Benjamin Gruenbaum Commented Mar 9, 2013 at 1:37
• 1 @BenjaminGruenbaum - Yeah, you'd figure he'd spotlight that bit at the top. Wrrrd. – Jared Farrish Commented Mar 9, 2013 at 1:39

2 Answers 2

What you're looking for is a way to share functionality across objects. This is exactly the sort of thing the JavaScript prototypical inheritance model excels at.

There's no need to use jQuery or other libraries in order to accomplish this. Consider going with the language's way of doing things.

Prototypes

In JavaScript, objects have 'prototypes'. When JavaScript looks for a method in an object that does not have it, it looks for it up on the prototype 'chain'. So all you need to do is override that functionality at a lower level on that chain.

This is explained in detail in the tutorial about it on MDN.

Your specific case

If I want a Base and Child class, where the Base has a method that Child needs to override, all we need to do is assign it anywhere lower in that chain.

The order of look-up is

Child Object --> Child's prototype (a Base object) --> Base's prototype (an Object)

For example, let's say you have a class Base

function Base(){

}
Base.prototype.bar = function() {
     //bar logic here
     console.log("Hello");
};
Base.prototype.foo= function() {
     //foo logic here
};

Function Child(){

}

Child.prototype = new Base();

I'd like Child to implement Bar differently, in which case I can do

Child.prototype.bar = function(){
   console.log("World");
}

Which results in

var a = new Base();
a.bar(); //outputs "Hello" to the console
var b = new Child();
b.bar(); //outputs "World" to the console
         //The Base instance that is the prototype of b has the bar method changed above

Note On Abstract Classes in JavaScript

Two of the primary reasons abstract methods inheritance is used in languages that are based on classical inheritance (like Java) is Polymorphism and code sharing.

In JavaScript neither are a problem. Code sharing can be done using prototypical inheritance just as easily. Moreoever, you can take just about any function and run it in another context. For example, I can even call the bar method of a Child object on an empty array by doing b.bar.call([]).

As for polymorphism JavaScript is a dynamic language with duck typing. This means it looks at objects based on their ability and not the way they were declared. If several objects have a method called bar I would have no problem calling that method on each of them if they are in an array or other collection. In Java that would require a common interface,type or ancestor.

For these reasons, things like abstract classes don't play a big role in JavaScript.

I recommend doing it the way CoffeeScript does it. You can put the first var declaration in a separate file to keep the code looking nice. As far as I know __extends is equivalent to $.extends

var __hasProp = {}.hasOwnProperty,
  __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };


var Fruit = (function() {

  function Fruit() {
    console.log("New fruit");
  }

  return Fruit;

})();

var Apple = (function(_super) {

  __extends(Apple, _super);

  function Apple() {
    console.log("New apple");
    Apple.__super__.constructor.apply(this, arguments);
  }

  return Apple;

})(Fruit);

var apple = new Apple();

Or, if you can use CoffeeScript, it looks like this:

class Fruit
  constructor: ->
    console.log "New fruit"

class Apple extends Fruit
  constructor: ->
    console.log "New apple"
    super