What will be a good minimalistic Javascript inheritance method?

inheritance, javascript, oop

Solution

I'd suggest the following pattern which makes use of a `clone` function to inherit from the protoypes and not instances:

function Shape(x, y) {
    this.x = x;
    this.y = y;
}

Shape.prototype.draw = function() {
    throw new Error('Arbitrary shapes cannot be drawn');
};

function Square(x,y,side) {
    Shape.call(this, x, y); // call super constructor
    this.side = side;
}

// inherit from `Shape.prototype` and *not* an actual instance:
Square.prototype = clone(Shape.prototype);

// override `draw()` method
Square.prototype.draw = function() {
    gotoXY(this.x,this.y); lineTo(this.x+this.side, this.y); // ...
};

It's important that methods reside in the prototype (which is as it should be anyway for performance reasons) so you can call the methods of a super class via

SuperClass.prototype.aMethod.call(this, arg1, arg2);

With some syntactic sugar, you can make JS look like a classical class-based language:

var Shape = Class.extend({
    constructor : function(x, y) {
        this.x = x;
        this.y = y;
    },
    draw : function() {
        throw new Error('Arbitrary shapes cannot be drawn');
    }
});

var Square = Shape.extend({
    constructor : function(x, y, side) {
        Shape.call(this, x, y);
        this.side = side
    },
    draw : function() {
        gotoXY(this.x,this.y); lineTo(this.x+this.side, this.y); // ...
    }
});

Problem

I'm rewriting a JavaScript project, and I want to be able to use object oriented methodologies to organize the mess that the current code is. The main concern is that this JavaScript is supposed to run as a widget inside 3rd party websites and I can't have it conflicting with other JavaScript libraries that other websites may use. So I'm looking for a way to write "class-like" inheritance in JavaScript that has the following requirements: - No external libraries or things that would conflict with an external library (that precludes copy&paste from an external library). - Minimalistic - I don't want the support code to be larger then a few lines of code and I don't want the developers to need a lot of boiler-plate every time they define a new class or methods. - Should allow for dynamically extending parent objects so that child objects see the changes (prototype). - Should allow for constructor chaining. - Should allow for `super` type calls. - Should still feel JavaScript-ish. Initially I tried to work with simple prototype chaining: ``` function Shape(x,y) { this.x = x; this.y = y; this.draw = function() { throw new Error("Arbitrary shapes cannot be drawn"); } } function Square(x,y,side) { this.x = x; this.y = y; this.side = side; this.draw = function() { gotoXY(this.x,this.y); lineTo(this.x+this.side, this.y); ... } } Square.prototype = new Shape(); ``` And that solves requirements 1, 2 and 6 but id does not allow super calls (new functions override parent functions), constructor chaining and dynamically extending a parent does not provide the new methods to a child class. Any suggestions will be welcome.

Original source