Rheinwerk Computing :: Einstieg in JavaScript

3.5 Operationen mit Objekten

In diesem Abschnitt sehen Sie ein Beispielprogramm, in dem eine Reihe von nützlichen Operationen und Prüfungen bezüglich einer Klasse, ihrer Eigenschaften und Methoden und einiger Objekte dieser Klasse durchgeführt wird. Die Klasse wird im head des Dokuments definiert, und zwar wie folgt:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>Operationen</title>
   <script>

      class Fahrzeug
      {
         constructor(f, g)
         {
            this.farbe = f;
            this.geschwindigkeit = g;
         }

         beschleunigen(wert)
         {
            this.geschwindigkeit += wert;
         }

         lackieren(f)
         {
            this.farbe = f;
         }

         toString()
         {
            return "Farbe: " + this.farbe
               + ", Geschwindigkeit: " + this.geschwindigkeit;
         }
      }

   </script>
</head>
...

Listing 3.5 Datei »obj_operation.htm«, Teil 1 von 8

3.5.1 Zugriffsoperatoren

Sie haben zwei Möglichkeiten, auf die Eigenschaften eines Objekts zuzugreifen : zum einen mit dem Operator . (Punkt), zum anderen mithilfe der eckigen Klammern []. Dies sehen Sie in folgendem Programmteil:

...
<body><p>
   <script>

      var dacia = new Fahrzeug("Rot", 50);
      document.write("Schreibweise mit Punkt: " + dacia.farbe + " "
         + dacia.geschwindigkeit + "<br>");
      document.write("Schreibweise mit [ und ]: " + dacia["farbe"] + " "
         + dacia["geschwindigkeit"] + "<br>");
      document.write("Schreibweise mit toString(): " + dacia + "<br><br>");
...

Listing 3.6 Datei »obj_operation.htm«, Teil 2 von 8

Nach Erzeugung eines Objekts werden seine Eigenschaften mehrmals ausgegeben. Innerhalb der eckigen Klammern wird der Name der Eigenschaft wie eine Zeichenkette innerhalb von Anführungsstrichen notiert. Sie können diese Zeichenkette aus einzelnen Teilen zusammensetzen, auch mithilfe von Variablen . Diese Schreibweise macht die Erstellung von Programmen noch ein Stück flexibler. Die Ausgabe sehen Sie, neben anderen, in Abbildung 3.5.

3.5.2 Verweise auf Objekte erzeugen und vergleichen

Die Variable, über die Sie auf ein Objekt zugreifen, stellt nur einen Verweis auf das Objekt dar, das Sie mithilfe von new erschaffen. Falls Sie diese Variable einer anderen Variablen zuweisen, so erschaffen Sie kein neues Objekt und auch keine Kopie des ursprünglichen Objekts, sondern nur einen zweiten Verweis auf das selbe Objekt. Sie können anschließend über beide Variablen auf dasselbe gleiche Objekt zugreifen, siehe auch Abbildung 3.5.

Sie können das Objekt an eine Funktion übergeben. Eine solche Übergabe wird Übergabe per Referenz genannt. Auch in diesem Fall wird keine Kopie angelegt. Eine Veränderung des Objekts innerhalb der Funktion wirkt direkt auf das Originalobjekt. Dies ist anders als bei der Übergabe von einfachen Variablen, in denen z. B. Zeichenketten oder Zahlen gespeichert werden

Die beiden Vergleichsoperatoren == und != können auch auf Objekte angewandt werden. Falls zwei Verweise auf dasselbe Objekt verweisen, liefert der Operator == den Wert true und der Operator != den Wert false. Falls die Verweise nicht auf dasselbe Objekt verweisen, liefert der Operator == den Wert false und der Operator != den Wert true.

Im folgenden Programmteil wird ein zweiter Verweis auf ein vorhandenes Objekt erzeugt. Anschließend wird das Originalobjekt mithilfe des zweiten Verweises ausgegeben. Die beiden Verweise werden anschließend verglichen. Zudem wird ein weiteres Objekt erzeugt, dessen Eigenschaften und Werte mit dem zuvor erzeugten Objekt übereinstimmen. Die Verweise auf diese beiden Objekte werden ebenso miteinander verglichen.

...
      var renault = dacia;
      document.write("Zweiter Verweis: " + renault + "<br>");
      if(renault == dacia)
         document.write("Dasselbe Objekt<br>");
      var simca = new Fahrzeug("Rot", 50);
      if(simca != dacia)
         document.write("Nicht dasselbe Objekt<br><br>");
...

Listing 3.7 Datei »obj_operation.htm«, Teil 3 von 8

Diese Ausgabe sehen Sie ebenfalls in Abbildung 3.5.

Abbildung 3.5 Zugriff mit »[« und »]«, zweiter Verweis, zweites Objekt

3.5.3 Instanzen prüfen

Objekte einer Klasse werden auch als Instanzen einer Klasse bezeichnet. Der Vorgang des Erschaffens eines Objekts wird auch Instantiieren genannt. Der Operator instanceof prüft, ob ein bestimmtes Objekt die Instanz einer bestimmten Klasse (oder deren Basisklasse) darstellt und liefert einen Wahrheitswert. Nachfolgend eine Prüfung:

...
      if(dacia instanceof Fahrzeug)
         document.write("'instanceof': Objekt ist Instanz der Klasse<br><br>");
...

Listing 3.8 Datei »obj_operation.htm«, Teil 4 von 8

Die Ausgabe sehen Sie in Abbildung 3.6.

3.5.4 Typ ermitteln

Den Operator typeof haben Sie bereits in Abschnitt 2.3.5 kennengelernt. Er liefert den Typ einer Variablen, also string, number oder boolean. Die Methoden einer Klasse haben den Typ function, die Objekte einer Klasse den Typ object . Die Klassen in JavaScript basieren klassisch auf Prototypen und Konstruktorfunktionen. Daher haben auch die Klassen selbst den Typ function, wie der nachfolgende Programmteil zeigt:

...
      document.write("'typeof':<br>"
         + "Fahrzeug: " + typeof Fahrzeug + "<br>"
         + "dacia: " + typeof dacia + "<br>"
         + "farbe: " + typeof dacia.farbe + "<br>"
         + "geschwindigkeit: " + typeof dacia.geschwindigkeit + "<br>"
         + "beschleunigen: " + typeof dacia.beschleunigen + "<br>"
         + "lackieren: " + typeof dacia.lackieren + "<br><br>");
...

Listing 3.9 Datei »obj_operation.htm«, Teil 5 von 8

In Abbildung 3.6 sehen Sie, dass die Klasse Fahrzeug und die beiden Methoden beschleunigen() und lackieren() den Typ function haben. Das Objekt dacia hat den Typ object. Die beiden Eigenschaften sind einfache Variablen des Typs string bzw. number.

Abbildung 3.6 »instanceof« und »typeof«

3.5.5 Member prüfen

Mithilfe des Operators in prüfen Sie, ob eine bestimmte Zeichenkette dem Namen eines Members der Klasse entspricht:

...
      if("farbe" in dacia)
         document.write("'in': farbe ist Member der Klasse<br>");
      if("beschleunigen" in dacia)
         document.write("'in': beschleunigen ist Member der Klasse<br>");
      if("lackieren" in dacia)
         document.write("'in': lackieren ist Member der Klasse<br>");
      if(!("leistung" in dacia))
         document.write("'in': leistung ist kein Member der Klasse<br><br>");
...

Listing 3.10 Datei »obj_operation.htm«, Teil 6 von 8

Die Prüfung ergibt, dass die Zeichenketten farbe, beschleunigen und lackieren Member der Klasse des Objekts dacia darstellen, leistung jedoch nicht, siehe Abbildung 3.7.

3.5.6 Kompakter Zugriff auf Eigenschaften

Das Schlüsselwort with ermöglicht eine kompaktere Schreibweise, falls Sie auf mehrere Eigenschaften desselben Objekts zugreifen möchten:

...
      with(dacia)
      {
         farbe = "Gelb";
         beschleunigen(10);
         document.write("'with': " + farbe + " " + geschwindigkeit + "<br>");
      }
...

Listing 3.11 Datei »obj_operation.htm«, Teil 7 von 8

Mit with(dacia) sorgen Sie dafür, dass in dem folgenden Block auf die Eigenschaften des Objekts dacia zugegriffen wird. Die Ausgabe sehen Sie ebenfalls in Abbildung 3.7.

Abbildung 3.7 »in« und »with«

3.5.7 Eigenschaften löschen

Sie können einzelne Eigenschaften eines Objekts mithilfe des Operators delete löschen. Die Eigenschaften anderer Objekte derselben Klasse sind davon nicht betroffen. Es folgt der letzte Teil des Programms, mit einem Beispiel dazu:

...
      delete dacia.geschwindigkeit;
      document.write("Werte der Member:<br>"
         + "farbe: " + dacia.farbe + "<br>"
         + "geschwindigkeit: " + dacia.geschwindigkeit + "<br>"
         + "lackieren: " + dacia.lackieren + "<br>"
         + "leistung: " + dacia.leistung);

   </script></p>
</body></html>

Listing 3.12 Datei »obj_operation.htm«, Teil 8 von 8

Die Eigenschaft geschwindigkeit wird gelöscht. Anschließend werden die Werte der Eigenschaften farbe, geschwindigkeit, lackieren und leistung ausgegeben. Die Eigenschaft geschwindigkeit existiert nicht mehr, die Eigenschaft leistung hat es nie gegeben. Die resultierende Ausgabe sehen Sie in Abbildung 3.8.

Abbildung 3.8 Eigenschaftswerte nach Löschvorgang