Question

I am no expert with Javascript. I have developed an operational page, using a function to define a class (as described here) for some of my JS code. This class is quite complex and helps computing object positions. It is now tested and operational.

I am working on new pages and I would like to re-use this class. But, at least one method of this class should be overridden (like in Java) for each page. I have read on another SO question that it is not possible to override methods in Javascript.

I was thinking about modifying the class prototype, but if I do so, all class instances will be modified.

I am very reluctant to duplicate my class code for each page. Is there a nice/elegant solution to this issue? Thanks.

Solution

So, taking into account Šime Vidas’ comment on top of Adam Rackis’ solution:

function Base(){}
Base.prototype.foo = function() { alert("base"); };

function Derived() {}

Derived.prototype = Object.create( Base.prototype );
Derived.prototype.foo = function() { alert("overridden"); };


var b = new Base();
var d = new Derived();

b.foo();
d.foo();

See: http://jsfiddle.net/8Gq7C/

Answer 1

You can overload functions in Javascript—sort of. Create a new function constructor that inherits from the function that has the method you want to overload, then change method on the derived function’s prototype.

It would look something like this:

function Base(){}
Base.prototype.foo = function() { alert("base"); };

function Derived() {}

//Derived.prototype = new Base(); //not ideal - see the comments
Derived.prototype = Object.create(Base.prototype); //grab MDN shim for older IE
Derived.prototype.constructor = Derived;

Derived.prototype.foo = function() { alert("overridden"); };

var b = new Base();
var d = new Derived();

b.foo();
d.foo();

LIVE DEMO