Javascript - Inheriting and calling parent methods from child

Question

Javascript - Inheriting and calling parent methods from child

I've been struggling with oop in javascript for several days, but I haven't found a solution.

I created 3 objects, superclass, child class and inheritance_manager which should do all the "prototype" -magic for my child classes.

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

Super (parent) class:

SDSection = function(sectionId, resourceId) {

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

    ...
};

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

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 overridden doSetups method in the parent class "SDSection" from the "doSetups" method in the child classes of type "TypedSectionHandler".

I have been struggling with this problem for about 1 week now and I have tried different solutions, from basic to more complex, but nothing seems to work.

Every time the script is executed eg. in chrome or firefox I get the error "cannot call method call on undefined" or simpler, "SDSection.doSetups" is undefined.

At least I took the above approach from here and adapted it to my needs, but it still doesn't work and the browser walks away with the same error. Slowly I get angry. :)

Does anyone know what I am doing wrong and what a working solution would look like?

thank

Udo

+3

javascript methods prototype parent call

user2009117 Jan 24 13 at 22:08

source to share

3 answers

voithos · Answer 1 · 2013-01-24T22:24:34+0000

You need to call a function doSetups

that is part of the parent class prototype

.

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

If you want to look at various methods for inheritance (in particular, one that doesn't require the caller to know the parent type), you can check out the CoffeeScript function __extends

and how it performs inheritance.

undefined · Answer 2 · 2013-01-24T22:35:37+0000

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 without any dependencies, and in your case it will 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();
        ...
    }
});

David Rettenbacher · Answer 3 · 2013-01-24T23:14:54+0000

If you want to do it yourself, you can go as voithos said - writing it yourself will help you understand js OOP exactly.

If you want more comfort (= do not use apply

and call

and - if you develop in Visual Studio 2012 - basic methods / - intellisense constructor ) I would like you to take a look at the framework I wrote: jsframework

With it, you can write your example very simply:

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 jsfiddle working: http://jsfiddle.net/QYXSr/1/

Output:

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

RENOUNCEMENT:

As I said, I am the developer of this framework;)

Javascript - Inheriting and calling parent methods from child

RENOUNCEMENT:

More articles: