Object – Schreibweise
Wer von den formalen Programmiersprachen kommt, empfindet Javascript-Objekte als recht schlicht: Javascript hat ein ausgesprochen einfaches Objekt-Modell. Objekte können alle möglichen Daten unter einem Namen sammeln – von ganzen Zahlen über Arrays und andere Objekte bis hin zu Funktionen. Typische Beispiele oder Anwendungen von Object sind Adressen mit Namen, Straße, Ort und Produkte mit Preis, Produktnummer, Lager oder einfach die Beschreibung einer HSL-Farbe.
Es gibt ein breites Spektrum von Techniken für das Erzeugen von Objekten. Eine Vorgehensweise nutzt einfach geschweifte Klammern, um ein Objekt zu initialisieren:
const color = {};
Die geschweiften Klammern erzeugen ein leeres Objekt. Jetzt können dem Objekt Eigenschaften mit der sogen. dot-Notation zugewiesen werden.
Genauso gut lassen sich die Eigenschaften und ihre Werte direkt innerhalb der geschweiften Klammern notieren, und zusätzliche Eigenschaften nachträglich mit der dot-Notation hinzufügen.
Literal
const color = { "number" : 6, "lightness": 92, "saturation": 71, "name" : "salmon" } console.log (color);
{
number: 100,
lightness: 92,
saturation: 71,
name: "salmon"
}
Kurzschreibweise
const color = {};
color.number = 174;
color.lightness = 72;
color.saturation = 56;
color.name = "turquoise";
console.log (color);
{
number: 174,
lightness: 72,
saturation: 56,
name: "turquoise"
}
Formell
const color = new Object();
color.number = 207;
color.lightness = 44;
color.saturation = 49;
color.name = "steelblue";
console.log (color);
{
number: 207,
lightness: 44,
saturation: 49,
name: "steelblue"
}
Objekte mit new erzeugen
Die dritte Variante erzeugt das Objekt mit new Object in einem zweistufigen Prozess:
- Die Deklaration eines Objekts legt eine Vorlage für ein Objekt an.
- Der new-Operator erzeugt die Datenstruktur – man sagt auch »das Objekt wird instanziert«.
Diesen Weg wird man kaum gehen. Im Endeffekt sind die mit new Object und die in Kurzschrift oben erzeugten Objekte gleich. Lesbarer und schneller sind die einfachen Schreibweisen.
Eigenschaften von Objekten
Eine Eigenschaft (property) eines Objekts ist ein Wert eines beliebiger Datentyps (number, string, array …) und auch selbst vom Typ Object sein kann.
Elemente werden über den Namen des Objekts – gefolgt von einem Punkt – gefolgt vom Namen der Variablen oder Funktion angesprochen.
color.num = 17;
Diese dot-Notatation kennen wir von vielen vorgefertigten Javascript Objects wie window oder document.
Optionale Verkettung – Optional Chaining
Taufrisch ist Optional Chaining in Javascript angekommen. Der ?-Operator hat eine zusätzliche Aufgabe bekommen und liest Eigenschaften des Objekts aus, ohne dass sich die Script-Logik darum kümmern muss, ob die Eigenschaft im Objekt vorhanden ist.
Wenn das Script eine Objekt-Eigenschaft aufruft, die nicht existiert (z.B. durch einen undefinierten Wert in der Datenbank oder aus einem API), entsteht ein Laufzeitfehler.
const planet = {
name : "Mars",
maße : {
durchmesser : 6800,
dichte : 9.93
}
}
let inhabit = planet.maße?.bewohner;
Methoden in Objekten
Eine Methode eines Objekts ist eine Aktion mit einem Namen, gefolgt von einem Doppelpunkt und dem Schlüsselwort function.
const color = { textfarbe : "#fff", hintergrund : "#E9931A", kombi : function (elem) { elem.style = "background:"" + this.hintergrund + ";color:" + this.textfarbe; } }; const element = document.querySelector(".colors") color.kombi(element);
Um es einfach zu machen: Was außerhalb von Objekten »Variable« genannt wird, heißt innerhalb von Objekten Property oder Eigenschaft. Funktionen in Objekten bezeichnet man als Methoden.
In ES6 fällt die Schreibweise für Methoden von Objekten der Übersichtlichkeit zuliebe kürzer aus. Der Doppelpunkt und das Schlüsselwort function dürfen wegfallen. Support von allen immergrünen Browsern, nicht von IE11.
const color = { textfarbe : "#fff", hintergrund : "#E9931A", kombi (elem) { elem.style = `background: ${this.hintergrund}; color: ${this.textfarbe}; padding: 6px`; } }; const element = document.querySelector(".colors") color.kombi(element);
Die Daten eines Objekts im Ganzen und am Stück auf den Server übertragen? Immer nur als Strings. Eine elegante Lösung ist JSON.stringify, das ein komplettes Javascript-Object in JSON-formatierte Strings umwandelt und JSON.parse () kann aus dem String wieder ein Objekt machen.
Object – Praxis-Beispiele
Ein Object kann ein HTML-Formular mit Methoden (Funktionen, die in Objekten liegen) zum Prüfen von Eingaben abbilden, z.B. einen VHS-Kurs:
const kurs = {
title: "Stricken und Häkeln",
num: "P4722-15-08",
description: "Einfache Strickmuster",
places : 18,
register: function () {
console.log ("Kursbezeichnung " + this.title);
},
show : function () {
console.log ("Freie Plätze " + this.places);
}
}
kurs.places = 20; // Der Eigenschaft places einen neuen Wert zuweisen
kurs.register(); // Kursbezeichnung ausgeben
kurs.show(); // Anzahl der freien Plätze anzeigen
Hochkommas um die Namen der Eigenschaften und Funktionen wie title, num oder register sind optional – können aber die Struktur besser herausstellen. Geschmacksache.
Der letzte Eintrag braucht kein Komma; einige Javascript-Implementierungen werden sogar zickig, wenn ein Komma hinter dem letzten Element eines Objekts sitzt.
this in Javascript Objects
Innerhalb des Objects greift this auf das Objekt zu – this.title auf die Bezeichnung, this.places auf die Eigenschaft places des Objekts.
Vorteile des Datentyps Object
Der Präfix macht das Programm besser lesbar – da weiß man immer gleich, was man vor sich hat. Ein Javascript Object kann ich kopieren und direkt in ein anderes Script setzen, ohne mich um die Namen der Variablen und Funktionen des Objekts zu kümmern.
In einem Javascript Object liegen Variablen und Funktionen geschützt. Da der Name des Objekts immer vorangesetzt wird, führt eine versehentliche Namensgleichheit von Eigenschaften und Methoden innerhalb von Objekten nicht zu einem Fehler.
Werte abrufen und zuweisen
Ganz einfach in der Console des Browsers ausprobieren:
kurs.title
"Stricken und Häkeln"
oder
kurs["title"]
"Stricken und Häkeln"
Beide Schreibweisen gelten – die dot-Notation mit dem Punkt oder eckige Klammern und Key in Hochkommas.
Mit derselben Syntax werden neue Werte zugewiesen.
kurs.title = "Javascript für Webdesigner";
oder
kurs["title"] = "Einführung in Javascript";
Objekt-Referenzen
Eine gewöhnliche Variable verweist auf Speicherplätze fester Größe, die sich zur Laufzeit nicht ändern. Objekte hingegen speichern keine Daten wie Variablen, sondern verweisen nur auf die Werte.
let kurs = new Object;
kurs.titel = "Stricken und Häkeln";
kurs.preis = 17.50;
kurs1 = kurs;
console.log (kurs1);
> Object
kurs1.title: "Stricken und Häkeln"
kurs1.preis: 17.5
Die Anweisung kurs1 = kurs erzeugt eine Referenz auf das Objekt kurs. kurs1 enthält jetzt dieselben Werte wie kurs, aber kurs1 ist keine Kopie von kurs, sondern eine Referenz, ein Verweis auf einen Speicherplatz.
Referenztypen wie Objekte hingegen verweisen nicht direkt auf Speicherplätze, sondern auf eine Sammlung von Referenzen – erst diese Referenzen verweisen auf einen bestimmten Speicher.
Für Einsteiger heißt das: Eine Referenz enthält keinen Wert, sondern nur etwas, was auf Werte verweist. Die Deklaration eines Objekts weist dem Objekt keine Werte zu, sondern nur Eigenschaften.
Arbeiten mit Objekten
Objekte agieren i.d.R. ähnlich wie Arrays: Sie beschreiben nicht ein einzelnes Element, sondern eine Sammlung von Elementen (Instanzen). Anders als Arrays haben Objekte keinen einfachen Index, um über sämtliche Elemente der Objekt-Sammlung zu iterieren.
Anstelle von Methoden wie forEach() für Arrays gibt es einen for-in-Loop, der auf jedes Elemente in der Sammlung zugreift.
const clothes = [
{ "name": "Mantel", "size": [44,42,40,38], "price": 69 },
{ "name": "Jeans", "size": [44,42,], "price": 59 },
{ "name": "Pullover", "size": [42,40,38], "price": 29 },
{ "name": "Jacke", "size": [44,42,40], "price": 28 }
];
for (let key in clothes) {
if (clothes.hasOwnProperty(key)) {
console.log ("key " + key );
console.log(clothes[key]);
}
}
[Log] key 0
[Log] {name: "Mantel", size: [44, 42, 40, 38], price: 69}
[Log] key 1
[Log] {name: "Jeans", size: [44, 42], price: 59}
[Log] key 2
[Log] {name: "Pullover", size: [42, 40, 38], price: 29}
[Log] key 3
[Log] {name: "Jacke", size: [44, 42, 40], price: 28}
Die Javascript-Objekthierarchie
Viele Javascript-Objekte sind selber in anderen Objekten enthalten. Javascript-Objekte haben ein „ist enthalten in“ <-> „ist Behälter von“-Verhältnis zueinander und kein Klassen<->Unterklassen-Verhältnis. Eigenschaften werden nicht von einem Objekttyp auf einen anderen vererbt.
Konstruktor-Funktionen
Die literale Notation und auch die Kurzschreibweisen machen den Scriptcode gut lesbar, sind aber nicht für jede Aufgabe geeignet. Wenn mehrere Kopien ähnlicher Objekte gebraucht werden, würde redundanter Code entstehen. Für solche Anwendungen hat Javascript eine andere Technik zur Erzeugung von Objekten – Konstruktor-Funktionen oder constructor functions. Konstruktor-Funktionen fangen per Konvention mit einem Großbuchstaben an und werden typischerweise für Datentypen eingesetzt, z.B. zur Erzeugung neuer Arrays.
let farben = new Array ("rot", "grün", "blau");
let tag = new Date ();
let muster = new RegExp ();
Javascript-Klassen
In vielen objektorientierten Programmiersprachen wird ein Objekt durch eine Klasse deklariert. JavaScript kannte bis ECMAScript 2015 keine Klassendefinition.
Javascript class wurde ES6 vorgestellt und legt eine zusätzliche Syntax über die Prototyp-basierte Vererbung. Die neuen Javascript-Klassen vereinfachen die Syntax und den Umgang mit der Vererbung.
