Objekte

Klassen und objektorientierte Programmierung

Hier eine ausführliche Erklärung in Englisch zum Thema Klassen und Objekte in Javascript mozilla/ javascript

Selbstverständlich könnte man ein Programm mit lauter Variablen erstellen und auf Arrays und Objekte verzichten. Das würde jedoch bei komplexen Programmen sehr unübersichtlich werden. Um Ordnung und Übersichtlichkeit zu schaffen, wurden Klassen und Objekte erfunden.

Die objektorientierte Programmierung nutzt Abstraktion und Verkapselung, um Objekte zu erstellen. Das Design der Software besteht aus einer Anzahl miteinander kommunzierender und interagierender Objekte.

Es hilft sich ein Auto oder eine andere Maschine vorzustellen, die aus vielen Bauteilen oder kleineren unabhängigen Maschinen besteht, die Nachrichten aussenden und empfangen, Daten verarbeiten oder Nachrichten zu anderen Bauteilen schicken.

In einer Klasse werden die Eigenschaften und Methoden und Ereignisse eines Objektes definiert. Von dieser Klasse erzeugt man dann Instanzen, welche man Objekte nennt. Ein Objekt wird mit dem Schlüsselwort new erzeugt. Das nennt man Initialisierung.

meinObjekt = new Klassenname(Eigenschaft);

Bei der objektorientierten Programmierung weist jede Klasse drei Merkmale auf:

• Eigenschaften (Englisch "properties")
• Methoden (Englisch "methods")
• Ereignisse (Englisch "events")

Hier einige Begriffe:

• Class / Klasse
  Die Klassen definiert die Charakteristika des Objekts
• Object / Objekt
  Die Instanz einer Klasse
• Property / Eigenschaft
  Eine Charakteristik des Objekts wie beispielsweise die Farbe
• Method / Methode
  Die Fähigkeiten eines Objektes, wie beispielsweise laufen
• Constructor / Konstruktor
  Eine Methode, die beim initiieren der Klasse ausgeführt wird
• Inheritance / Vererbung
  Eine Klasse kann die Charakteristika einer anderen Klasse erben
• Encapsulation / Verkapselung
  Die Klasse definiert nur die Charakteristik des Objekts, eine Methode definiert nur wie die Methode ausgeführt wird
• Polymorphismus
  Verschiedene Klassen können die gleichen Eigenschaften und Methoden nutzen

Neben den definierten Klassen in Javascript, kann man auch eigene Klassen und davon Objekte erzeugen. Erst ab ES6 gibt es einen speziellen Klassenbefehl class, später mehr davon.

In der folgenden Grafik sieht man einige Objekte. Der Zustand von Objekten wird über die Eigenschaften und die Verbindung zu anderen Objekten definiert. Das Verhalten von Objekten wird über die Methoden definiert. Der Zustand von ShoppingCart wird über Anzahl und Art der  items definiert.   Mit seinen Methoden kann man items hinzufügen entfernen oder alle löschen.  

Objekte

Objekte kann man auf verschiedene Arten herstellen. Im folgenden wird ein Objekt mit der Literal Schreibweise erzeugt.

Objekte haben eine starke Ähnlichkeit mit Arrays. Es wird jedoch anstatt eines Index ein String benutzt. Diesen nennt man auch Key, Schlüssel oder Eigenschaft. Die Elemente, auf die sie verweisen, nennt man Werte.

Schlüssel		Wert
"beine"	:	2
"laenge"	:	6
"nahrung"	:	"Fleischfresser"

 

Wir haben es hier mit Schlüssel-Werte- Paaren zu tun. Während Arrays in der Regel eine Reihe gleichartiger Werte enthält, so haben Objekte in der Regel einzelne Elemente mit Eigenschaften oder Attributen. Ein Beispiel verdeutlicht den Unterschied. Ein Array dinos enthält die Namen verschiedener Dinosaurier. Ein Objekt könnte die verschiedenen Eigenschaften und Attribute eines einzelnen Dinosauriers enthalten, wie Größe, Gewicht, Anzahl der Beine etc.

 

var trex = {
"beine" : 2,
"laenge" : 6,
"nahrung" : "Fleischfresser"
}

Hier wird eine Variable namens trex erstellt. Diese bekommt ein Objekt mit 3 Schlüssel- Werte- Paaren. Im Gegensatz zu Arrays, werden Objekte in geschweiften Klammern anstatt in eckigen Klammern gesetzt. Alles was zwischen den geschweiften Klammern steht wird Objektliteral genannt. Literal bedeutet, der gesamte Wert wird in einem Schritt aufgeschrieben und nicht nacheinander aufgebaut.

Der Schlüssel ist immer ein String. Er muss allerdings nicht in Anführungsstrichen geschrieben sein. Wenn man ihn jedoch ohne Anführungszeichen schreibt, muss man diesselben Regeln wie bei Variablennamen beachten. Schreibt man den Schlüssel in Anführungsstrichen sind beispielsweise auch Leerzeichen erlaubt.

var trex = {
beine : 2,
laenge : 6,
nahrung : "Fleischfresser"
}

Auf Objekte zugreifen:

Man kann genau wie bei Arrays über eckige Klammern auf die Objektwerte zugreifen, die Eigenschaft sollte in Anführungszeichen stehen.

trex["beine"]

Eine andere Möglichkeit ist der Zugriff über Punktsyntax:

trex.beine

Die Punktsyntax kann man nur nutzen, wenn der Schlüssel nicht in Anführungszeichen steht, oder wenn der Schlüssel keine verbotenen Sonderzeichen und/ oder Leerzeichen enthält.

Greift man auf einen Schlüssel zu, den es nicht gibt, wird der Wert undefined geliefert

Object.keys() / Zugriff auf alle Schlüssel

Object.keys(meinObjekt) liefert ein Array mit allen Schlüsseln. Eine andere Möglichkeit alle Eigenschaften zu durchlaufen ist die for-in-Schleife.

Beispiel

  let dino = {art: "T-Rex", beine : 2, food: 'meat'}
  Object.keys(dino);  //4['art', 'beine', 'food'] 

Die Schlüssel in Objekten haben keine festgelegte Reihenfolge, wie das bei einem Array der Fall ist. In unserem Beispiel ist "beine" nicht unbedingt das erste Element.

In folgendem Beispiel werden die Eigenschaften und deren Werte angezeigt. Voraussetzung ist ein HTML Element mit der id="output":

let dino = {art:"T-Rex", beine: 5, food:"meat"}
let ausgabe = document.getElementById("output");
let eigenschaften = Object.keys(dino);
   
for(let i= 0; i < eigenschaften.length; i++){
    let prop = eigenschaften[i];
    ausgabe.innerHTML += prop +": "+ dino[prop] +"<br>";
}

for-in Schleife / Zugriff auf alle Elemente

Beispiel
Siehe dazu auch das Thema for-in-Schleife. Mit einer for-in-Schleife ist der Zugriff auf alle Elemente eines Objekts einfacher als mit Object.keys().

let dino = {art:"T-Rex", beine: 5, food:"meat"}
let ausgabe = document.getElementById("output");
  for(let prop in  dino){
    ausgabe.innerHTML += prop +": "+ dino[prop] +"<br>";
}

Werte zu Objekten hinzufügen

Man kann auch Schlüssel-Werte Paare im Nachhinein hinzufügen. Hier wird zuerst ein leeres Objekt mit geschweiften Klammern erstellt, dann werden die Schlüssel-Werte Paare hinzugefügt.

Eine Möglichkeit

var trex = {};  
  trex["beine"] = 2;
  trex["laenge"]= 6;
  trex["nahrung"] = "Fleischfresser";
  

Punktsyntax

var trex = {};  
  trex.beine = 2;
  trex.laenge= 6;
  trex.nahrung = "Fleischfresser";
  

Arrays und Objekte kombinieren

Man kann einem Array als Wert ein weiteres Array hinzufügen. Oder die Werte eines Arrays bestehen aus lauter Objekten. Damit erzeugt man datenbankähnliche Strukturen.

var dinosaurier = [
{ name: "Tyrannosaurus Rex", beine: 2, laenge : 6, nahrung: "andere Saurierer"},
{ name: "Stegosaurus", beine: 4, laenge: 8, nahrung: "Obst und Gemüse"},
{ name: "Brontosaurus", beine: 4, lange: 15, nahrung: "Blätter"}
];

Wir haben hier ein Array dinosaurier. Die Werte werden in eckigen Klammern eingefügt und mit Komma getrennt. Die Werte sind Objekte, welche in geschweiften Klammern eingefügt werden.

Man kann auch nachträglich Objekte hinzufügen:

var dinosaurier = [];
dinosaurier[0] = {};	
dinosaurier[0]["beine"] =  2;
dinosaurier[0]["name"] = "T-Rex";

Zugriff

Der Zugriff auf einen einzelnen Dino geschieht über den index. Alle Eigenschaften des ersten Dinos werden folgendermaßen geliefert:

dinosaurier[0]

dinosaurier[0]["name"] liefert "Tyrannosaurus Rex"

andere Möglichkeit Punktsyntax

dinosaurier[0].name

---

Javascript Tipps