Javascript - Inheritance and calling parent methods from child

Question

i'm fighting around with oop in javascript for a few days now but i don't find a solution.

I've created 3 objects, a super class, a child class and an inheritance_manager which should do all the "prototype"-magic on my child classes.

The inheritance manager:

Inheritance_Manager = {};
Inheritance_Manager.extend = function(subClass, baseClass) {
    function inheritance() {
    }
    inheritance.prototype = baseClass.prototype;
    subClass.prototype = new inheritance();
    subClass.prototype.constructor = subClass;
    subClass.baseConstructor = baseClass;
    subClass.superClass = baseClass.prototype;
};

The super (parent) class:

SDSection = function(sectionId, resourceId) {

    this.self = this;
    this.sectionId = sectionId;
    this.resourceId = resourceId;

    ...
};

SDSection.prototype.doSetups = function() {
        ...
};

The child class:

TypedSectionHandler = function(sectionId, resourceId) {
    SDSection.call(this, sectionId, resourceId);
        ...
};

Inheritance_Manager.extend(TypedSectionHandler, SDSection);

TypedSectionHandler.prototype.doSetups = function() {
        ...
    SDSection.doSetups.call(this);
        ...
};

What i want to do is simple in other programming languages like php or java. I want to call the overwritten "doSetups"-method in the parent class "SDSection" from the method "doSetups" in child classes of type "TypedSectionHandler".

I'm struggling around with this problem for round about 1 week now and i tried different solutions, from basic to more complex, but nothing seems to work.

Everytime the script is executed for eg in chrome or firefox i will get the error "cannot call method call on undefined" or more simpler, "SDSection.doSetups" is not defined.

At least i picked up the above approach from here and adapted it to my needs but it does not work anyway and the browser are quitting with the same error. Slowly i'm getting seriously nuts. :)

Does somebody know what i'm doing wrong and how a working solution will look like?

Thanks

Udo

Answer 1

You need to call the doSetups function that is part of the parent class's prototype .

TypedSectionHandler.prototype.doSetups = function() {
        ...
    SDSection.prototype.doSetups.call(this);
        ...
};

If you want to look at different techniques for inheritance (particularly, one which does not require the caller to know the parent type), you may want to check out CoffeeScript's __extends function, and how it performs inheritance.

Answer 2

Use voithos' solution if you are doing pure javascript. I like to use John Resig's simple inheritance snippet in my current projects. It's only 521 bytes after minification , with no dependencies, and in your case it would work like this:

SDSection = Class.extend({
    init: function(sectionId, resourceId) {

        this.sectionId = sectionId;
        this.resourceId = resourceId;

        ...
    },
    doSetups: function(){
        ...
    }
});

TypedSectionHandler = SDSection.extend({
    doSetups: function(){
        ...
        this._super();
        ...
    }
});

Answer 3

If you want to do it by yourself, you can go the way like voithos said - writing it on your own helps you understand js OOP for sure.

If you want to have more comfort (= not having to use apply and call and - if you're developing in Visual Studio 2012 - base-methods/-constructor intellisense support ) I would like you to check out a framework I wrote: jsframework

With it you can write your sample really easy:

SDSection = new Class(Object, function(base, baseConstructor)
{
    // member fields for prototype
    this.self = null;
    this.sectionId = -1;
    this.resourceId = -1;

    // constructor
    this.init = function(sectionId, resourceId)
    {
        this.self = this;
        this.sectionId = sectionId;
        this.resourceId = resourceId;
    };

    // member functions
    this.doSetups = function() 
    {
        console.log("SDSection doSetups: " + this.sectionId + "/" + this.resourceId);
    };
});

TypedSectionHandler = new Class(SDSection, function(base, baseConstructor)
{
    this.anotherId = -2;

    // constructor
    this.init = function(sectionId, resourceId, anotherId) 
    {
        baseConstructor(sectionId, resourceId);

        this.anotherId = anotherId;
    };

    // member functions
    this.doSetups = function() 
    {
        // call base function
        base(this).doSetups();
        console.log("TypedSectionHandler doSetups: " + this.anotherId);
    };
});

var t = new TypedSectionHandler(1, 2, 3);
t.doSetups();
console.log(t instanceof TypedSectionHandler);
console.log(t instanceof SDSection);

Here's a working jsfiddle: http://jsfiddle.net/QYXSr/1/

Output:

SDSection doSetups: 1/2
TypedSectionHandler doSetups: 3
true
true 

DISCLAIMER:

As I said, I'm the developer of this framework ;)