JavaScript/Objekte - Eigenschaften und Methoden

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Objekte in JavaScript sind fest umgrenzte Datenelemente mit Eigenschaften und oft auch mit objektgebundenen Methoden (Funktionen). Neben vielen vordefinierten Objekten können Sie in JavaScript eigene Objekte erzeugen und deren Eigenschaften auslesen und Methoden aufrufen.


Objekte in JavaScript können mit Gegenständen im wirklichen Leben verglichen werden. So wie ein Auto anhand seiner Eigenschaften wie Marke, Farbe, Baujahr und TÜV-Zulassung beschrieben wird, können JavaScript-Objekte Eigenschaften (properties) haben, die die Merkmale beschreiben.


Eigenschaften von Objekten[Bearbeiten]

Ein Objekt funktioniert als eine Zuordnungsliste, die unter bestimmten Namen weitere Unterobjekte, auch Member genannt, speichert. Diese Unterobjekte teilt man in Eigenschaften und Methoden. Methoden sind ausführbare Funktionen, die dem Objekt zugehören, Eigenschaften sind alle nicht ausführbaren Unterobjekte. Sie können als mit dem Objekt verbundene Variablen erklärt werden.


Auf die Eigenschaften eines Objekts können Sie am einfachsten mit der Punkt-Notation (dot-syntax) zugreifen.

Beispiel
ObjektName.EigenschaftsName


Wie bei allen Variablen gelten dabei auch für Objektnamen und Eigenschaftsnamen die Regeln für selbstvergebene Namen.


Ein neues Objekt wird mit dem Schlüsselwort new eingeleitet. Sie können für dieses Objekt Eigenschaften deklarieren, indem Sie ihnen einen Wert zuweisen:

Beispiel
var auto = new Object();
auto.marke   = 'Audi';
auto.farbe   = 'rot';
auto.baujahr = 2007;
auto.tüv     = true;


Objekte werden manchmal auch fälschlicherweise als assoziative Arrays angesehen, da jeder Eigenschaft eine Zeichenkette als Wert zugeordnet ist. Deshalb können Sie auf Eigenschaften auch über eine Klammer-Notation (bracket-notation) zugreifen, die dem Index-Operator bei Arrays gleicht (objekt["eigenschaft"]).

Beispiel
auto['marke']   = 'Audi';
auto['farbe']   = 'rot';
auto['baujahr'] = 2007;
auto['tüv']     = true;


auf Eigenschaften zugreifen[Bearbeiten]

Es gibt mehrere Möglichkeiten auf Eigenschaften von Objekten zugreifen:

  • for...in: Schleife, durchläuft alle aufzählbaren Eigenschaften eines Objekts und seiner Prototypenkette
  • Object.keys(): gibt einen Array mit allen aufzählbaren Eigenschaftsnamen aus
  • Object.getOwnPropertyNames(): gibt einen Array mit allen Eigenschaftsnamen aus

neue Objekte erzeugen[Bearbeiten]

Es gibt mehrere Wege ein Objekt zu erzeugen:

  • mit dem Schlüsselwort new in einer Anweisung new Object();
  • mit der Methode Object.create()
  • durch ein Literal (engl. für wörtlich)

new[Bearbeiten]

Ein neues Objekt wird mit dem Schlüsselwort new eingeleitet. Sie können für dieses Objekt Eigenschaften deklarieren, indem Sie ihnen einen Wert zuweisen:

Beispiel
var auto = new Object();
auto.marke   = 'Audi';
auto.farbe   = 'rot';
auto.baujahr = 2007;
auto.tüv     = true;


Literale[Bearbeiten]

Die Literalschreibweise ist eine Kurzschreibweise, mit der Sie Werte am schnellsten in einem Objekt-Literal (engl. für wörtlich) notieren können.

Beispiel
var auto = {
    marke: "Audi",
    baujahr: 2007,
    hupen: function () { alert('tuuut')}
};

Dieser Objekt-Initialisierer (Object-Initializer) weist dem Objekt, dargestellt durch die Variable auto, mehrere Eigenschaften mit ihren Werten zu. Das Objekt und die Wertzuweisung(en) sind optional; wenn Sie sich nicht anderswo auf dieses Objekt beziehen müssen, benötigen Sie keine Wertzuweisung auf eine Variable.

Beachten Sie: Wenn das Objekt an einer Stelle erscheint, an der eine Anweisung erwartet wird, müssen Sie es in Klammern setzen, damit es nicht mit einem Anweisungsblock verwechselt wird.

Angenommen, wir stehen am Straßenrand und es fährt ein hupendes Auto an uns vorbei. Wir brauchen dafür die "hupen"-Funktion des vorbeifahrenden Autos - nach dem Hupen ist es aber ja schon vorbeigefahren, wir haben also keinen Zugriff mehr darauf und speichern uns deshalb auch sein Objekt nicht. Nach dem Hupen ist das Objekt einfach weg (wie das Auto).
{ marke:"Audi", baujahr: 2007, hupen: function () {alert('tuuut'); } }.hupen();
--> ergibt einen Syntaxfehler ("unexpected token :"), da der JavaScript-Parser in einem allgemeinen Kontext davon ausgeht, dass { einen Kommandoblock einleitet - und in diesem hat " : " keine Bedeutung. Wir müssen das Objekt im allgemeinen Kontext also in Klammern kapseln, damit der Parser versteht, dass ein Literal und kein Anweisungsblock folgt:
({ marke:"Audi", baujahr: 2007, hupen: function () {alert('tuuut'); } }).hupen();

--> funktioniert.


Objekt-Initialisierer sind Ausdrücke, und jeder Objekt-Initialisierer erzeugt bei einem Aufruf der entsprechenden Anweisung ein neues Objekt.

Beachten Sie: Auch wenn diese Objekte den gleichen Inhalt haben, ergibt ein Vergleich mit dem Vergleichsoperator == z.B. bei new String("Hallo Welt") == new String("Hallo Welt") das Ergebnis false, da es sich um zwei verschiedene, nicht identische Objekte handelt.[1])


Beispiel
var auto = {
    marke: "Audi",
    baujahr: 2007,
    hupen: function () { alert('tuuut')},
    motor: {zylinder: 4, hubraum: 1.99}
};

Die Eigenschaft motor ist ein (Unter-)Objekt mit eigenen Eigenschaften.


Für Arrays gibt es die Schreibweise mit den eckigen Klammern:

Beispiel
var items = [ "a", "b", 42, { text: "Hallo Welt!" }, [9, 81], "Ende" ];

items.forEach(function (n) {
  console.dir(n);
});
In einem Array können verschiedenste Datentypen als Werte gespeichert werden. Das Beispiel will zeigen, wie innerhalb eines Array-Literals andere Literale notiert werden können.

Konstruktoren[Bearbeiten]

Alternativ können Sie eine Konstruktor-Funktion deklarieren, die Sie dann mit dem Schlüsselwort new aufrufen.

Ein Konstruktor ist eine Funktion, die neue Objekte erzeugt. Diese Objekte werden Instanzen (Exemplare, Abkömmlinge) dieses Konstruktors genannt. Der Bauplan für die Instanzen ist selbst ein Objekt: Das sogenannte prototypische Objekt, kurz Prototyp. Instanzen sind so gesehen Kopien des Prototypen und werden ihm nachgebildet.

Beispielsweise ist ein String-Objekt (eine Zeichenkette) eine Instanz der Konstruktorfunktion String. Jedes Objekt hat eine Eigenschaft namens constructor, die auf die Konstruktorfunktion verweist, die es hergestellt hat. Beispielsweise liefert "Dies ist ein String".constructor die Konstruktorfunktion String.


Beispiel
function Auto(marke,baujahr,hupen) {
    this.marke   = marke;
    this.baujahr = baujahr;
    this.hupen   = hupen;
}
Diese Funktion erzeugt das Objekt Auto mit seinen Eigenschaften marke, baujahr und der Methode hupen. Mit dem Schlüsselwort this werden den Eigenschaften dieses Objekts Werte zugewiesen.
Empfehlung: Es ist eine Konvention so erzeugte Objekte mit Großbuchstaben beginnen zu lassen.


Jetzt können Sie mit new eine neue, leere Instanz dieses Objekts erzeugen und die Funktion im Kontext dieses Objekts ausführen. Das bedeutet, im Konstruktor kann das neue Objekt über this angesprochen werden. So können Sie ihm z.B. Eigenschaften und Methoden hinzufügen:

Beispiel
var familienkutsche = new Auto('VW', 2010, function () { alert('tööt')});
var zweitwagen      = new Auto('Audi', 2007, function () { alert('tuuut')});
Diese Anweisungen erzeugen die Objekte familienkutsche und zweitwagen und weisen ihnen passende Werte für die Eigenschaften marke, baujahr und der Methode hupen zu.

Auf diese Weise können Sie unzählige gleich ausgestattete Objekte, sogenannte Instanzen erzeugen.

Objekte und Methoden[Bearbeiten]

Methoden sind Funktionen, die an ein Objekt gebunden sind. Sie können genau wie normale Eigenschaften eines Objekts aufgerufen werden.

Beispiel
ObjectName.methodenName = FunktionsName;

var meinObj = {
  meineMethode: function(Argument) {
    // ...Anweisungsblock
  }
};


Die Methode kann dann im Kontext des Objekts mit der Punkt-Notation aufgerufen werden: Objektmethoden sprechen Sie an, indem Sie zuerst den Namen des Objekts notieren, dahinter einen Punkt, dahinter den Namen der Methode, und dahinter eine öffnende und eine schließende Klammer. Dabei sind keine Leerzeichen erlaubt! Einige Methoden können auch Parameter beim Aufruf erwarten. Diese Parameter müssen Sie dann zwischen der öffnenden und der schließenden Klammer übergeben.

Beispiel
Object.methodenName(Argumente);


Methoden-Deklarationen können aber auch schon in der Konstruktorfunktion eingefügt werden. Diese Funktion gibt einige Eigenschaften von Auto aus:

Beispiel
function zeigeAuto() {
  var ergebnis = 'Ein ' + this.marke + ' aus dem Jahre ' + this.baujahr + ' macht '
    + this.hupen();
  ausgabe(ergebnis);
}

Durch den Aufruf mit this wird die Funktion zeigeAuto eine Methode des Objekts Auto.

Beispiel
this.zeigeAuto =  zeigeAuto;

Quellen[Bearbeiten]

  1. molily.de: Objekte und primitive Typen

Weblinks[Bearbeiten]