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 e.g. 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

this.self = this; makes absolutely no sense.

Bergi
– Bergi

2013-01-24 23:03:49 +00:00
Commented Jan 24, 2013 at 23:03 — Bergi
– Bergi, Commented Jan 24, 2013 at 23:03

voithos · Accepted Answer · 2013-01-24 22:37:43Z

4

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.

edited Jan 24, 2013 at 22:37

answered Jan 24, 2013 at 22:24

voithos

70.9k12 gold badges107 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

undefined · Accepted Answer · 2013-01-24 22:35:37Z

3

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();
        ...
    }
});

answered Jan 24, 2013 at 22:35

undefined

6,5534 gold badges53 silver badges60 bronze badges

Comments

David Rettenbacher · Accepted Answer · 2013-01-25 00:06:03Z

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 ;)

Collectives™ on Stack Overflow

Javascript - Inheritance and calling parent methods from child

3 Answers 3

Comments

Comments

DISCLAIMER:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

DISCLAIMER:

Comments

Your Answer

Sign up or log in

Post as a guest

Related