Anfängerfrage objektorientierte Programmierung

[Thomas Schmidt]

Hallo Forum,

für mein neues Projekt möchte endlich mal lernen, wie man objektorientiert programmiert. Ich hab mich etwas in die Materie eingelesen und dazu eine prinzipielle Frage.

Ich möchte mehrere Objekte erstellen, die eine Eigenschaft (Status) und eine Methode (setzeStatus) besitzen. Abhängig vom Status sollen 2 Bilder gewechselt werden. Diese Bilder sind für jeweils mehere Objekte gleich (hier nur jeweils 2 als Beispiel). Ich hab 2 Lösungen:

Lösung 1:

function BinaerElement(id,bild0,bild1) {  
 this.setzeStatus = function(wert) {  
  if (wert) document.getElementById(id).src = bild1.src;  
  else document.getElementById(id).src = bild0.src;  
  this.status = wert;  
 }  
}  
  
function FensterWaag(id){  
 this.constructor(id, BildFensterWaagGeschl, BildFensterWaagOffen);  
}  
FensterWaag.prototype = new BinaerElement();  
  
function FensterSenkr(id){  
 this.constructor(id, BildFensterSenkrGeschl, BildFensterSenkrOffen);  
}  
FensterSenkr.prototype = new BinaerElement();  
  
var Fenster0 = new FensterWaag("fenster0");  
var Fenster1 = new FensterWaag("fenster1");  
var Fenster2 = new FensterSenkr("fenster2");  
var Fenster3 = new FensterSenkr("fenster3");

Lösung 2:

function statuswechsel (wert) {  
 if (wert) document.getElementById(this.id).src = this.bild1.src;  
  else document.getElementById(this.id).src = this.bild0.src;  
  this.status = wert;  
}  
  
function FensterWaag(id) {  
 this.id = id;  
 this.bild0 = BildFensterWaagGeschl;  
 this.bild1 = BildFensterWaagOffen;  
 this.setzeStatus = statuswechsel;  
}  
  
function FensterSenkr(id) {  
 this.id = id;  
 this.bild0 = BildFensterSenkrGeschl;  
 this.bild1 = BildFensterSenkrOffen;  
 this.setzeStatus = statuswechsel;  
}  
  
var Fenster0 = new FensterWaag("fenster0");  
var Fenster1 = new FensterWaag("fenster1");  
var Fenster2 = new FensterSenkr("fenster2");  
var Fenster3 = new FensterSenkr("fenster3");  
  

Welche ist vorzuziehen? Ich tendiere zu Lösung 1, sie erscheint mir eleganter. Lösung 2 finde ich zwar simpler, dafür sind noch die öffentlichen Eigenschaften id, bild0 und bild1 dazugekommen. Gibts noch eine Lösung?

Vielen Dank schon mal!

Tom

[Struppi]

Welche ist vorzuziehen? Ich tendiere zu Lösung 1, sie erscheint mir eleganter. Lösung 2 finde ich zwar simpler, dafür sind noch die öffentlichen Eigenschaften id, bild0 und bild1 dazugekommen. Gibts noch eine Lösung?

Ja. Du kannst diese Werte auch im Konstruktor privat machen:

function BinaerElement(id,bild0,bild1) {  
  var _id = id;  
  var _bild0 = bild0;  
  var _bild1 = bild1;  
  
  this.setzeStatus = function(wert) {  
  if (wert) document.getElementById(_id).src = _bild1.src;  
  else document.getElementById(_id).src = _bild0.src;  
  this.status = wert;  
 }  
}

Das wäre aber nur nötig, wenn du diese auch in anderen Funktionen brauchst oder auch um geeignete Defaultwerte zu benutzen.

Genau das Gleiche gilt für deine 2. Lösung, im Prinzip ist gegen öffentliche Eigenschaften nichts zu sagen, da dies ein übliche Technik in JS ist, auch wenn es OOP Puristen nicht so behagt.

Struppi.

[Felix Riesterer]

Lieber Struppi,

im Prinzip ist gegen öffentliche Eigenschaften nichts zu sagen, da dies ein übliche Technik in JS ist, auch wenn es OOP Puristen nicht so behagt.

ja und nein. ich möchte zu Deinen Ausführungen ergänzend auf meinen kleinen Lehrgang verweisen, in dem weitere objektorientierte Dinge erlernbar sind.

Liebe Grüße,

Felix Riesterer.

[Struppi]

im Prinzip ist gegen öffentliche Eigenschaften nichts zu sagen, da dies ein übliche Technik in JS ist, auch wenn es OOP Puristen nicht so behagt.

ja und nein. ich möchte zu Deinen Ausführungen ergänzend auf meinen kleinen Lehrgang verweisen, in dem weitere objektorientierte Dinge erlernbar sind.

Nach dem Code von Thomas zu urteilen dürfte ihm dein Lehrgang nicht mehr so viel bringen.

Struppi.

[Thomas Schmidt]

Vielen Dank erst mal. Ihr wart ja super schnell. Ich werd mir alles noch mal genau anschauen(in das Tutorial hatte ich schon mal reingeschaut, danke). Gerade die Hinweise zur Performance und bezüglich der öffentlichen Eigenschaften finde ich gut, da mir halt die Erfahrung fehlt.

[Christoph]

Moin.

Welche ist vorzuziehen? Ich tendiere zu Lösung 1, sie erscheint mir eleganter. Lösung 2 finde ich zwar simpler, dafür sind noch die öffentlichen Eigenschaften id, bild0 und bild1 dazugekommen. Gibts noch eine Lösung?

Aus Performance-Sicht ist Lösung 2 vorzuziehen: Lösung 1 erzeugt für jedes BinaerElement-Objekt ein neues Funktionsobjekt für setzeStatus(), während bei Lösung 2 nur einmalig ein Funktionsobjekt für statusWechsel() erzeugt wird.

Lösung 2 lässt sich übrigens noch eleganter schreiben:

  
// Konstruktor für generische Fenster  
function Fenster(id, bild0, bild1) {  
    this.id = id;  
    this.bild0 = bild0;  
    this.bild1 = bild1;  
}  
  
// Funktionsobjekt wird nur einmalig erzeugt  
Fenster.prototype.setzeStatus = function(wert) {  
    this.status = wert;  
    document.getElementById(this.id).src =  
        (wert ? this.bild1 : this.bild0).src;  
};  
  
// Fabrik-Methoden für spezielle Fenster  
Fenster.erzeugeWaag = function(id) {  
    return new Fenster(id, bildFensterWaagGeschl, bildFensterWaagOffen);  
};  
  
Fenster.erzeugeSenkr = function(id) {  
    return new Fenster(id, bildFensterSenkrGeschl, bildFensterSenkrOffen);  
};  
  
var fenster0 = Fenster.erzeugeWaag('fenster0'),  
    fenster1 = Fenster.erzeugeWaag('fenster1'),  
    fenster2 = Fenster.erzeugeSenkr('fenster2'),  
    fenster3 = Fenster.erzeugeSenkr('fenster3');  

Christoph

PS: Es ist Konvention, in JavaScript die Namen von Objekt-Eigenschaften (die keine Konstruktoren sind) kleinzuschreiben...

[Thomas Schmidt]

Hallo Christoph,

ich bekomme dein Beispiel nicht zum Laufen. Die Objekte fenster0 ... 3 scheinen nicht erzeugt zu werden. Ich sehe aber auch keine Fehler.

Gruß

Thomas

[Christoph]

Moin.

ich bekomme dein Beispiel nicht zum Laufen. Die Objekte fenster0 ... 3 scheinen nicht erzeugt zu werden. Ich sehe aber auch keine Fehler.

Kann man da mal etwas mehr von deinem Code sehen? Kannst du irgendwo eine Beispielseite hochladen?

Christoph