JavaScript Vererbung


#1

Hallo Community,

folgendes Beispiel: FIDDLE

Ich möchte gern in JS mit Vererbung arbeiten und aus mehreren Quellen habe ich mir nun ein Beispiel erarbeitet. In der Function ‘Visual’ sollen allgemein gültige Funktionen und Eigenschaften vorhanden sein und ich möchte, dass andere Functions (hier ‘Test’) diese “erben”. Leider ist in meinem Beispiel so, dass ein zweites

new Test()

dieselbe Visual Function nutzt, sodass Änderungen auf

test2

sich auf

test1

auswirken.

Wie kann ich es richtig machen? Und gleich ein Hinweis: Ich arbeite erst seit kurzem mit JS und komme aus der Java Welt. Bitte etwas Nachsicht :D.


#2

Ich bin jetzt auch nicht so fit in JS, aber schau dir mal das hier an: http://javascript.jstruebig.de/javascript/792
ich habe es nur überflogen, aber es sollte zu deinem Problemen passen.


#3

In Javascript wird üblicherweise per prototype vererbt. Ein Beispiel findest du hier:
http://www.brain-dump.org/docs/oop-in-js/inheritance.html
Falls du dein Problem damit nicht lösen kannst sag bitte nochmal Bescheid, dann kann ich dir dein Beispiel oben mal entsprechend umschreiben.


#4

Ich habe gelernt, dass man JS ganz anders betrachten muss. Es gibt nun mal keine Vererbung wie in JAVA in JavaScript. Auch wenn auf vielen Seiten von Vererbung gesprochen wird. Diese Seiten haben sicherlich irgendwie recht, aber ich musste mich eindeutig von der Vorstellung trennen, dass es wie in JAVA gehen wird.

ich habe es nun so gelöst:
[javascript]Visual = function () {
this.DivElement = $("

");
this.Position = new Point(0, 0);
this.abstandMarkElement = 4;
this.getX = function () { return this.Position.x; };
this.setX = function (_x) {
    this.Position.x = _x;
    this.calculatePositions();
};

this.getY = function () { return this.Position.y; };
this.setY = function (_y) {
    this.Position.y = _y;
    this.calculatePositions();
};

this.getDiv = function () { return this.DivElement; };

this.calculatePositions = function () {
    var left = "left: " + (this.Position.x - this.abstandMarkElement) + "px; ";
    var top = "top: " + (this.Position.y - this.abstandMarkElement) + "px; ";
    $(this.DivElement).attr("style", left + top + "position: absolute; ");
};

};

Test = function () {
this.visual = new Visual();
//…
};

$(document).ready(function () {
var test = new Test();
test.visual.setX(100);
test.visual.setY(100);

$('div#container').append(test.visual.getDiv());

var test2 = new Test();
test2.visual.setX(200);
test2.visual.setY(200);

$('div#container').append(test2.visual.getDiv());

});[/javascript]

Vollständiger Code:
jsfiddle


#5

Man nennt sowas in Javascript auch Mixin. JQuery bietet dazu z.B.

http://www.jquerysdk.com/api/jQuery.mixin

In Dojo gibts das declare Modul etc. pp.


#6

Vererbung in Javascript läuft über das Attribut prototype das jede Funktion besitzt. Auf die Methode der Oberklasse zuzgreifen benötigt aber meistens einige Tricksereien, man kann damit aber ansonsten schon ziemlich viel anstellen.

[javascript]function A() {
this.methode=function() {
alert(‘Ich bin ein A!’);
}
}

function B() {
this.methode=function() {
alert(‘Ich bin ein B!’);
}
}
B.prototype=new A();

alert(new A() instanceof A); // true
alert(new B() instanceof A); // true
alert(new A() instanceof B); // false
alert(new B() instanceof B); // true
[/javascript]