[英]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. 我现在用javascript在javascript中争取几天,但我找不到解决方案。
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. 我已经创建了3个对象,一个超类,一个子类和一个inheritance_manager,它应该在我的子类上完成所有“原型”-magic。
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. 我想做的是在其他编程语言如php或java中很简单。 I want to call the overwritten "doSetups"-method in the parent class "SDSection" from the method "doSetups" in child classes of type "TypedSectionHandler".
我想从类型为“TypedSectionHandler”的子类中的方法“doSetups”中调用父类“SDSection”中的覆盖“doSetups”方法。
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. 每次执行脚本时,例如在chrome或firefox中,我将得到错误“无法调用未定义的方法调用”或更简单,“SDSection.doSetups”未定义。
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 你做
You need to call the doSetups
function that is part of the parent class's prototype
. 您需要调用
doSetups
函数,该函数是父类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. 如果您想查看不同的继承技术(特别是那些不需要调用者知道父类型的技术),您可能需要查看CoffeeScript的
__extends
函数以及它如何执行继承。
Use voithos' solution if you are doing pure javascript. 如果你正在使用纯JavaScript,请使用voithos的解决方案。 I like to use John Resig's simple inheritance snippet in my current projects.
我喜欢在我当前的项目中使用John Resig的简单继承片段 。 It's only 521 bytes after minification , with no dependencies, and in your case it would work like this:
缩小后只有521个字节,没有依赖关系,在你的情况下,它会像这样工作:
SDSection = Class.extend({
init: function(sectionId, resourceId) {
this.sectionId = sectionId;
this.resourceId = resourceId;
...
},
doSetups: function(){
...
}
});
TypedSectionHandler = SDSection.extend({
doSetups: function(){
...
this._super();
...
}
});
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. 如果你想自己做,你可以像voithos说的那样 - 自己写它可以帮助你理解js OOP。
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 如果你想要更舒适 (=不必使用
apply
和call
并且 - 如果你在Visual Studio 2012中开发 - base-methods / -constructor intellisense支持 ),我希望你查看我写的框架: 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/ 这是一个有用的jsfiddle: http : //jsfiddle.net/QYXSr/1/
Output: 输出:
SDSection doSetups: 1/2
TypedSectionHandler doSetups: 3
true
true
As I said, I'm the developer of this framework ;) 正如我所说,我是这个框架的开发者;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.