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