CODEWITHSUNDEEP
javascriptmethodscallprototypeparent
user2009117
user2009117

Reputation: 61

Javascript - Inheritance and calling parent methods from child

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

Upvotes: 3

Views: 7288

Answers (3)

David Rettenbacher
David Rettenbacher

Reputation: 5120

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

Upvotes: 0

voithos
voithos

Reputation: 70552

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.

Upvotes: 4

undefined
undefined

Reputation: 6453

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

Upvotes: 3

Related Questions