Javascript Object – einfache Objekte erzeugen

Javascript Object, Javascript Objekte: Vereinigung oder Zusammenschluss von Datentypen und Funktionen

Objekte sind Behälter für logisch zusammen gehörende Variablen und Funktionen, die als Eigenschaften und Methoden des Objekts bezeichnet werden. Ein Object kapselt Daten und Logik nach außen ab und bietet eine einfache Schnittstelle zu seinen Elementen über seinen Namen.

Wer von den formalen Programmiersprachen kommt, empfindet Javascript-Objekte als recht schlicht: Javascript hat ein ausgesprochen einfaches Objekt-Modell.

Javascript-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.

Object – Beispiele

Wenn der Teddy als object in einem Katalog oder Shop implementiert wäre, dann gäbe es für jeden Teddy einen Datensatz mit Material, Preis, Hersteller, Produktnummer und Beurteilung sowie Funktionen bzw. Methoden, um die Anzahl der Teddys dieses Typs im Lager und die Dauer der Lagerung zu berechnen.

Ein Object kann ein HTML-Formular mit Methoden (Funktionen, die in Objekten liegen) zum Prüfen von Eingaben abbilden.

Ein Objekt fasst Daten und Funktionen unter einem Namen zusammen, z.B. var kurs = new Object

Javascript Object Beispiel VHS-Kurs anlegen
Beispiel: Anlegen eines Javascript-Objekts, Object create

Objekte erzeugen

Objekte werden in einem zweistufigen Prozess erzeugt:

  1. Die Deklaration eines Objekts legt eine Vorlage für ein Objekt an.
  2. Der new-Operator erzeugt die Datenstruktur – man sagt auch »das Objekt wird instanziert«.
var kurs = new Object;
     ^      ^
     |      |
     |      |
     |      +--- neues Objekt 
     +--- das neue Objekt heißt "kurs"

kurs.titel = "Stricken und Häkeln";
    ^
    +--- Eigenschaft (property) »titel«
kurs.free();
    ^
    +--- Methode »free«

Das erzeugt ein Javascript-Objekt mit den Eigenschaften titel und einer Methode (Funktion in einem Objekt) free.

Die Eigenschaften eines Objekts sind ein beliebiger Datentyp und eine Eigenschaft kann selber Object sein.

In Javascript existiert bereits ein primitives Object als Vorlage (Prototype) für eigene Objekte. Von diesem Objekt, dem Prototyp, sind alle anderen Objekte abgeleitet. Ein neues Objekt wird durch durch den new-Operator und den Object() oder Funktions-Konstruktor erzeugt.

Am Rande: Nach diesem Muster werden auch Array-, Date- und Math-Objekte erzeugt.

  • Wenn wir ein Array anlegen – das ist ein Objekt.
  • Wenn wir ein Datum anlegen – das ist ebenfalls ein Objekt.
  • Das ganze Javascript DOM ist ein Objekt.
var farben = new Array ("rot", "grün", "blau");
var tag    = new Date ();
var muster = new RegExp ();

Eigenschaften und Methoden

  • Eine Eigenschaft (property) eines Objekts ist ein Wert, der gesetzt (set) und gelesen (get) werden kann.
  • Eine Methode (Funktion in einem Javascript-Object) ist eine Aktion, die durchgeführt werden kann (z.B. das Löschen eines HTML-Elements).

Elemente werden über den Namen des Objekts – gefolgt von einem Punkt – gefolgt vom Namen der Variablen oder Funktion angesprochen.

document.getElementById('foo').getAttribute('style')
window.addEventListener ('event',function)

Diese dot-Notatation kennen wir von vielen vorgefertigten Javascript Objects wie window oder document.

Eigenschaften eines Javascript-Objekts können wir uns als besondere Variable einer Javascript-Funktion vorstellen, auf die außerhalb der Funktion zugegriffen werden kann.

Um es einfach zu machen: Was außerhalb von Objekten »Variable« genannt wird, heißt innerhalb von Objekten Property oder Eigenschaft. Funktionen in Objekten heißen Methoden.

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.

var kurs = new Object;
kurs.titel = "Stricken und Häkeln";
kurs.preis = 17.50;

var buch = new Object;
buch.title = "Per Anhalter durch die Galaxis";
buch.preis = 9.80;

In einem Javascript Object liegen Variablen und Funktionen geschützt. Da der Name des Objekts immer vorangesetzt wird, führt eine versehentliche Namensgleichheit nicht zu einem Fehler.

Alternative Kurzformen

Alternativ kann man das Objekt in einer Kurzform deklarieren, instanzieren und initialisieren

Literale Syntax
var kurs = new Object ();
kurs = { 
    'title': "Stricken und Häkeln",
    'num': "P4722-15-08",
    'description': "Einfache Strickmuster",
    'register': function () {
        …
    }
}
Implizite Kurzschrift
var kurs = { 
    'title': "Stricken und Häkeln",
    'num': "P4722-15-08",
    'description': "Einfache Strickmuster",
    'register': function () {
        …
    }
}

Die beiden Schreibweisen sind syntaktisch gleich; literale Syntax ist besser lesbar, die Kurzschrift ist bequemer und kompakter.

Die Hochkommas um die Namen der Eigenschaften und Funktionen wie title, num oder register sind optional – stellen aber die Struktur besser heraus.

Der letzte Eintrag braucht kein Komma; einige Javascript-Implementierungen werden sogar zickig, wenn ein Komma hinter dem letzten Element eines Objekts sitzt.

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.

var 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.

var k = 100;var kurs = {'title' = "Stricken und Häkeln";'preis' = 17.50;}var kurs1 = kurs;

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.

var 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 (var 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.

Javascript-Klassen

In vielen objektorientierten Programmiersprachen wird ein Objekt durch eine Klasse deklariert. JavaScript kannte bis ECMAScript 2015 keine Klassendefinition.

Die Klassendefinition, die in ECMAScript 2015 vorgestellt wurde, legt eine zusätzliche Syntax über die Prototyp-basierte Vererbung mit einer vereinfachten Syntax und einem einfacheren Umgang mit der Vererbung.

Teddy sp2478 Nolle 60% Polyester 40% Cotton 27,09 Javascript Object Beispiel VHS-Kurs anlegen KURS-NR.BESCHREIBUNG WEITERKURSFREIEPLÄTZEKURS ANLEGEN18vhsvar kurs = new Object();kurs = {'title': "Stricken und Häkeln",'num': "PA-4722-15-08",'description': "Strickmuster",'places': 18,'register': function () {}};