Objektorientierung in JavaScript/Objekte und Klassen/Das Objekt

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
<html>
<head>
<style>
p.dotted {border-style: dotted; padding: 10px;}
</style>
</head>
</html>

==Erstellen von Objekten in JavaScript==
Ein Objekt besitzt Eigenschaften (Attribute) und Methoden, welche gemeinsam in einem Objekt vorhanden sind. Eigenschaften beschreiben die Bedeutung und die Ausprägung eines Merkmals des Objekts, beispielsweise Seitenanzahl = 764. Die Gesamtheit aller Werte der Eigenschaften nennt man Zustand des Objekts. Methoden definieren das Verhalten bzw. die Funktionalität eines Objekts. Es können zum Beispiel die Methoden einschalten(), drucken() oder warnungAusgeben() eines Druckers beschrieben (spezifiziert) und umgesetzt (implementiert) werden. Des Weiteren wird jedes Objekt durch eine eindeutige Identität beschrieben, welches es von anderen Objekten unterscheidet, auch wenn beide den gleichen Zustand haben.
<p class=dotted>Objekte verfügen über Eigenschaften, Funktionalitäten und eine Identität.</p>

Objekte können durch Object Literals erstellt werden. Alle Eigenschaften und Methoden werden zwischen geschweiften Klammern definiert. Sie werden in Schlüssel-Wert-Paaren gespeichert. Schlüssel und Werte werden durch einen Doppelpunkt getrennt.

<code id="56f902f08bf65">
var maria = {
  augenfarbe : "blau",
  haarfarbe : "braun",
  groesse : 1.71,
  sprechen : function(aussage) {
    return "Maria: \"" + aussage+ "\"";
  }
};
</code>
<run id="56f902f08bfd6">
var aussage= "Ich bin " + maria.groesse + "m groß.";
maria.sprechen(aussage);
</run>

Eine zweite Möglichkeit bietet der Aufruf des Konstruktors von Object. Danach werden weitere Attribute und Methoden hinzugefügt.

<code id="a12bctu2015bg1">
var maria = new Object();
maria.augenfarbe = "blau";
maria.haarfarbe = "braun";
</code>
<run id="a12bctu2015bg2">
maria.haarfarbe;
</run>
Als Schlüssel können Strings oder Numbers verwendet werden.
Der Zugriff auf Elemente des Objekts erfolgt durch Punkt- oder Klammer-Notation.
<run id="4hcfnep1ke1">
maria.augenfarbe == maria["augenfarbe"];
</run>

==Abgeleitete Eigenschaften==
Eigenschaften von Objekten können auch aus anderen Eigenschaften ''abgeleitet'' werden. Dazu muss in JavaScript aber auf Funktionen zurückgegriffen werden, sodass ''umfang'' und ''flaeche'' keine "echten" Attribute sind.
<code id="542718ahf110702042016">
var quadrat = {
  a : 5,
  umfang : function() {
    return 4 * this.a;
  },
  flaeche : function() {
    return this.a * this.a;
  }
};
</code>
Deshalb muss beim Aufruf von ''umfang'' und ''flaeche'' auch eine Parameterliste mitgeführt werden.
<run id="571b2872db30f">
quadrat.flaeche();
</run>
Eigenschaften, deren Werte aus anderen Eigenschaften des Objekts errechnet werden, nennt man ''abgeleitet''.


==Methoden==
Methoden von Objekten können die übergebenen Parameter, Eigenschaften des Objekts oder Rückgabewerte anderer Methoden verwenden.
<code id="571b26de13a75">
var kreis = {
  radiusInCm : 5,
  flaecheInQuadCm : function() {
    return mathe.multipliziere(Math.PI, Math.pow(this.radiusInCm, 2));
  } 
};
var mathe = {
  multipliziere : function(a, b) {
    return a * b;
  }
};
</code>
<run id="571b26de13adf">
kreis.flaecheInQuadCm();
</run>
Methoden ohne Rückgabewert heißen Prozeduren. Geben sie einen Wert zurück, nennt man sie Funktionen.

==Darstellung von Objekten in UML==
[[Bild:Flogerlinghoff_UML_Objekt.JPG|center|180px]]

In der Modellierungssprache UML (Unified Modeling Language) werden Objekte als Rechtecke dargestellt. Der Name des Objekts wird unterstrichen. Die Attribute und die Methoden werden durch horizontale Striche voneinander getrennt. Werte werden den Attributen durch ein "=" zugeordnet. Beim einem Methodenaufruf werden die Parameter in die Klammern hinter ein "in" geschrieben. Abgeleitete Eigenschaften werden durch einen Schrägstrich "/" markiert.

==Botschaften zwischen Objekten==
Objekte können untereinander interagieren, das heißt Nachrichten austauschen.
<code id="54hdfghjk4">
var person1 = {
  vorname : "Alex",
  nachname : "Alexos",
  heiraten : function(gefragtePerson) {
    return "Willst du mich heiraten, " + gefragtePerson.vorname+ "? " + gefragtePerson.antwort(this);
  }
};
var person2 = {
  vorname: "Alexandra",
  nachname : "Alexis",
  antwort: function(fragendePerson) {
    if (fragendePerson.vorname == "Alex" && fragendePerson.nachname == "Alexos") {
      return "Ja!";
    } else {
      return "Nein.";
    }
  }
};
</code>
<run id="54hdfghjk5">
person1.heiraten(person2);
</run>
Alex sendet Alexandra die Aufforderung, die Funktion ''antworten'' auszuführen und übergibt mit ''this'' sich selbst als Parameter. Alexandra überprüft, ob er es wirklich ist, und sendet dann eine Nachricht mit ihrer Antwort zurück an Alex.
<p class=dotted>Objekte können untereinander Nachrichten austauschen.</p>

==Aufgaben==
Erstelle ein Objekt Baum, welches durch die Attribute ''alter'', ''hoehe'' und ''blaetterart'' (Laubblätter oder Nadeln) gekennzeichnet ist. Das Objekt soll die Möglichkeit haben, Warnungen vor Schädlingen an andere Bäume zu senden. Da alle Bäume in der Umgebung gewarnt werden sollen, ist eine Verwendung von <tt>alert(string)</tt> in der Methode ''warnen()'' sinnvoll.
<code id="5426180202042016">
var baum = {
  //...
};
</code>
<check execute="(typeof baum.alter == 'number') && (typeof baum.hoehe == 'number') && (typeof baum.blaetterart== 'string') && (typeof baum.warnen() == 'undefined')">true</check>
<run id="5427180802042016">
baum.warnen()
</run>

Um die Schädlinge zu bekämpfen, kann der Baum auch ein Insekt rufen. Implementiere die Methoden <tt>rufeInsekt(Insekt)</tt> in ''baum'' und erweitere dieses Objekt um den Parameter ''hatSchaedlinge''. Nachdem das Insekt gerufen wurde, sollen die Schädlinge verschwunden sein.
<code id="5427184802042016">
var baum = {
  //...
};
var insekt = {
  //...
};
</code>
<check execute="var hatSchaedlingeVorInsekt = baum.hatSchaedlinge; for(p in insekt) insekt[p](); (baum.hatSchaedlinge == false) && hatSchaedlingeVorInsekt">true</check>
<run id="5427184ag902042016">
baum.rufeInsekt(insekt);
baum.hatSchaedlinge;
</run>