Skip to content

5. Literale Objekte

Als „Literalobjekte“ bezeichnen wir hier Objekte, die wörtlich im Code definiert sind. JavaScript kennt den Begriff der Klasse und des Klassenobjekts. Es handelt sich also nicht um diese Art von Objekten, von denen wir hier sprechen.

Image

5.1. Skript [obj-01]

Wir stellen hier die ersten Eigenschaften von Literalobjekten vor. Die wichtigste ist, dass das Objekt über einen Zeiger manipuliert wird.


'use strict';
// ein leeres Objekt
const obj1={};
// Die Eigenschaften des Objekts können dynamisch erstellt werden
obj1.prop1="abcd";
console.log('obj1=',obj1);
// eine weitere Eigenschaft
obj1.prop2=[1,2,3];
console.log("obj1=",obj1);
// eine weitere Eigenschaft mit einer anderen Notation
obj1['prop3']=true;
console.log("obj1=",obj1);
// obj1 ist eine Referenz auf das Objekt (Zeiger), nicht das Objekt selbst
const obj2=obj1;
// obj2 und obj1 verweisen auf dasselbe Objekt
obj2.prop1="xyzt";
console.log("obj1=",obj1);
console.log("obj2=",obj2);
// Eigenschaften können Variablen sein
const var1='prop1';
console.log('prop1=',obj1[var1]);

Ausführung


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-01.js"
obj1=[object Object]
obj1= { prop1: 'abcd', prop2: [ 1, 2, 3 ] }
obj1= { prop1: 'abcd', prop2: [ 1, 2, 3 ], prop3: true }
obj1= { prop1: 'xyzt', prop2: [ 1, 2, 3 ], prop3: true }
obj2= { prop1: 'xyzt', prop2: [ 1, 2, 3 ], prop3: true }
prop1= xyzt

Kommentare

  • Zeile 3 des Codes: Ein Objekt wird über einen Zeiger verwaltet. [obj1] ist also ein Zeiger. Das Ändern des Objekts, auf das der Zeiger verweist, hat keine Auswirkungen auf den Zeiger [obj1]. Deshalb wird, wie bei Arrays, eine Objektreferenz mit dem Schlüsselwort [const] deklariert;
  • Zeile 6 des Codes: Wie bei Arrays kann [console.log] Objekte anzeigen;
  • Zeile 11 des Codes: obj1.prop3 kann als obj1.[‘prop3’] umgeschrieben werden. Diese Schreibweise ist nützlich, wenn „prop3“ tatsächlich eine Variable ist (Zeilen 20–21);
  • Zeilen 13–18 des Codes: zeigen, dass die Anweisung [obj2=obj1] eine Referenzkopie des Objekts und nicht das Objekt selbst ist;

5.2. Skript [obj-02]

Dieses Skript zeigt, dass die Eigenschaften eines Objekts den Wert eines Objekts annehmen können. Man erhält somit mehrstufige Objekte. Außerdem wird das globale Objekt [JSON] eingeführt, das die Konvertierung zwischen Objekt und Zeichenkette ermöglicht.


'„use strict“;
// Ein mehrstufiges Objekt
const personne = {
  prénom: "martin",
  âge: 12,
  père: {
    prénom: "paul",
    âge: 45
  },
  mère: {
    prénom: "micheline",
    âge: 42
  }
}
// Zugriff auf Eigenschaften
console.log("prénom personne=", personne.prénom);
console.log("prénom mère=", personne.mère.prénom);
personne.mère.âge = 40;
console.log("âge mère=", personne.mère.âge);
// console.log kann Objekte anzeigen
console.log("personne=", personne);
console.log("mère=", personne.mère);
// Man kann auch die Zeichenkette jSON des Objekts anzeigen
let json = JSON.stringify(personne);
console.log("jSON=", json);
// Man kann den String „jSON“ erneut auslesen
let personne2 = JSON.parse(json);
console.log("père=", personne2.père);

Kommentare

  • Zeile 24: Umwandlung eines JavaScript-Objekts in eine Zeichenkette jSON;
  • Zeile 27: Umwandlung einer Zeichenkette jSON in ein JavaScript-Objekt;

Ausführung


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-02.js"
prénom personne= martin
prénom mère= micheline
âge mère= 40
personne= { 'prénom': 'martin',
'„Alter“: 12,
'Vater': { 'Vorname': 'Paul', 'Alter': 45 },
'Mutter': { 'Vorname': 'Micheline', 'Alter': 40 } }
mère= { 'prénom': 'micheline', 'âge': 40 }
jSON= {"prénom":"martin","âge":12,"père":{"prénom":"paul","âge":45},"mère":{"prénom":"micheline","âge":40}}
père= { 'prénom': 'paul', 'âge': 45 }

Kommentare

  • Zeile 10: In einer Zeichenkette jSON müssen die Eigenschaften ebenso wie die Werte vom Typ Zeichenkette zwingend in Anführungszeichen gesetzt werden;

5.3. Skript [obj-03]

Dieses Skript führt das Konzept der Getter- und Setter-Methoden für eine Objekteigenschaft ein:


'use strict';
// Getter und Setter eines Objekts
const personne = {
  // Getter
  get nom() {
    console.log("getter nom");
    return this._nom;
  },
  // Setter
  set nom(unNom) {
    console.log("setter nom");
    this._nom = unNom;
  }
};
// Setter
personne.nom = "Hercule";
// Getter
console.log(personne.nom);
// das Objekt selbst
console.log("personne=", personne);
// Das hindert jedoch nicht daran, direkt auf die Eigenschaft [_nom] zuzugreifen
personne._nom = "xyz";
console.log("personne=", personne);

Kommentare

  • Zeilen 5–7: Definition einer Funktion [getter], die im Allgemeinen den Wert einer Eigenschaft des Objekts zurückgibt, aber eigentlich beliebige Werte zurückgeben kann. Das Schlüsselwort [function] wird durch das Schlüsselwort [get] ersetzt;
  • Zeile 7: Der Getter gibt die Eigenschaft [_nom] zurück. Man sieht, dass diese nicht deklariert werden muss;
  • Zeilen 10–13: Definition von „[setter]“, einer Funktion, die den empfangenen Wert normalerweise einer Eigenschaft des Objekts zuweist, die aber tatsächlich alles Mögliche tun kann. Das Schlüsselwort [function] wird durch das Schlüsselwort [set] ersetzt. Mit [setter] lässt sich die Gültigkeit des an [setter] als Parameter übergebenen Werts überprüfen;
  • Zeile 16: Die Funktion [set nom] wird implizit aufgerufen;
  • Zeile 18: Die Funktion [get nom] wird implizit aufgerufen;
  • Zeile 22: zeigt, dass die Verwendung von Gettern/Settern vom guten Willen des Entwicklers abhängt. Wenn dieser den Namen der von ihnen verwalteten Eigenschaft kennt, kann er direkt darauf zugreifen;

Ausführung


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-03.js"
setter nom
getter nom
Hercule
personne= { nom: [Getter/Setter], _nom: 'Hercule' }
personne= { nom: [Getter/Setter], _nom: 'xyz' }

Beachten Sie in den Zeilen 5–6, dass [console.log] auch Eigenschaften anzeigt, die Funktionen sind.

5.4. Skript [obj-04]

Dieses Skript zeigt drei Möglichkeiten, die Namen der Eigenschaften eines Objekts zu schreiben, sowie zwei Möglichkeiten, auf diese zuzugreifen.


'use strict';
// Die Namen der Eigenschaften eines Objekts  können Literale [nom] sein, in Apostrophe ['nom'] gesetzt werden
// oder in Anführungszeichen ["nom"]

// Literale
const obj1 = {
  nom: "martin",
  prénom: "jean"
};
console.log("prénom=", obj1.prénom);

// in Anführungszeichen
const obj2 = {
  'Name': „martin“,
  'Nachname': „jean“
};
console.log("nom=", obj2.nom);

// in Anführungszeichen
const obj3 = {
  "nom": "martin",
  "prénom": "jean"
};

// zwei mögliche Syntaxen für den Zugriff auf die Eigenschaft [nom]
console.log("nom=", obj3.nom);
console.log("nom=", obj3['nom']);

Ausführung


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-04.js"
prénom= jean
nom= martin
nom= martin
nom= martin

5.5. Skript [obj-05]

Das Skript zeigt, dass die Eigenschaften eines Objektliterals Funktionen sein können. Damit nähert man sich stark dem Klasseninstanzobjekt an, bei dem es Eigenschaften und Methoden gibt.


'use strict';

// Ein Objekt kann Eigenschaften vom Typ [function] haben
const personne = {
  // Eigenschaften
  prénom: "martin",
  âge: 12,
  père: {
    prénom: "paul",
    âge: 45
  },
  mère: {
    prénom: "micheline",
    âge: 42
  },
  // Methode
  toString: function () {
    return JSON.stringify(this);
  }
}

// Verwendung
console.log("personne=", personne);
console.log("personne.toString=", personne.toString());
  • Zeilen 17–19: eine objektinterne Methode. In dieser wird über das Schlüsselwort [this] (Zeile 18) auf die Eigenschaften des Objekts zugegriffen. [this] bezeichnet das Objekt selbst, [this.prénom] die Eigenschaft [prénom] dieses Objekts;

Ausführung


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-05.js"
personne= { 'prénom': 'martin',
'„Alter“: 12,
'Vater': { 'Vorname': 'Paul', 'Alter': 45 },
'Mutter': { 'Vorname': 'Micheline', 'Alter': 42 },
toString: [Function: toString] }
personne.toString= {"prénom":"martin","âge":12,"père":{"prénom":"paul","âge":45},"mère":{"prénom":"micheline","âge":42}}

5.6. Skript [obj-06]

Dieses Skript zeigt, wie man auf die Eigenschaften eines Objekts zugreifen kann, wenn man deren Namen nicht von vornherein kennt.


'use strict';

// Ein Objekt kann Eigenschaften vom Typ [function] haben
let personne = {
  // Eigenschaften
  prénom: "martin",
  âge: 12,
  père: {
    prénom: "paul",
    âge: 45
  },
  mère: {
    prénom: "micheline",
    âge: 42
  },
  // Methode
  toString: function () {
    return JSON.stringify(this);
  }
}

// Verwendung
console.log(personne);
// Eigenschaften
console.log("-----------------------");
for (const key in personne) {
  if (personne.hasOwnProperty(key)) {
    const element = personne[key];
    console.log(key, "=", element);
  }
}
// um die ESLint-Warnung zu umgehen (1)
console.log("-----------------------");
for (const key in personne) {
  if (Object.prototype.hasOwnProperty.call(personne, key)) {
    const element = personne[key];
    console.log(key, "=", element);
  }
}
// um die ESLint-Warnung zu umgehen (2)
console.log("-----------------------");
for (const key in personne) {
  // eslint-disable-next-line no-prototype-builtins
  if (personne.hasOwnProperty(key)) {
    const element = personne[key];
    console.log(key, "=", element);
  }
}

Kommentare

  • Zeilen 26–31: Der Code, mit dem man die Liste der Eigenschaften eines Objekts (ohne die Methoden) abrufen kann. Dieser Code ist Gegenstand einer Warnung von ESLint:

Image

  • Zeilen 32–39: Der Code, mit dem die Warnung von ESLint umgangen werden kann. Dazu wird der Prototyp der Klasse [Object] verwendet;
  • Zeilen 41–47: Oder man deaktiviert einfach die Warnung (Zeile 43);

5.7. Skript [obj-07]

Das Skript [obj-07] zeigt die Möglichkeit, ein Objekt zu zerlegen:


'„use strict“;
// Destrukturierung

// Literale
const obj1 = {
  nom: "martin",
  prénom: "jean"
};

// Destrukturierung von obj1 in Variablen [n,p]
const { nom: n, prénom: p } = obj1;
console.log("n=", n, "p=", p);

// Dekonstruktion von obj1 in Variablen [n2,p2]
function f({ nom: n2, prénom: p2 }) {
  console.log("f-n2=", n2, "f-p2=", p2);
}
f(obj1);

// Entpacken von obj1 in Variablen [nom,prénom]
function g({ nom: nom, prénom: prénom }) {
  console.log("g-nom=", nom, "g-prénom=", prénom);
}
g(obj1);

// Entpacken von obj1 in Variablen [nom,prénom]
// mit verkürzter Schreibweise, die h({Nachname:Nachname,Vorname:Vorname}) entspricht
function h({ nom, prénom }) {
  console.log("h-nom=", nom, "h-prénom=", prénom);
}
h(obj1);

Anmerkungen

  • Zeile 11: Die geschweiften Klammern {} ermöglichen die Destrukturierung. Die Syntax 

const { nom: n, prénom: p } = obj1

legt zwei Variablen [n] und [p] an und entspricht folgendem Code:


const n = obj1.nom
const p = obj1.prénom

Die Deklaration könnte wie folgt lauten:


const { nom => n, prénom => p } = obj1

um daran zu erinnern, dass die Werte der Attribute von [nom, prénom] in die Variablen [n, p] übernommen werden;

  • Der Destrukturierungsvorgang wiederholt sich in den Zeilen 15, 21 und 28. Jedes Mal weisen die geschweiften Klammern {} darauf hin, dass ein Objekt in Variablen destrukturiert wird;
  • Zeile 28 kann verwirrend sein. Es handelt sich um eine Kurzschreibweise für die Notation: 

function h({ nom : nom, prénom : prénom })

Die Ergebnisse der Ausführung lauten wie folgt:

1
2
3
4
n= martin p= jean
f-n2= martin f-p2= jean
g-nom= martin g-prénom= jean
h-nom= martin h-prénom= jean

5.8. Skript [obj-08]

Das Skript [obj-08] zeigt, wie man eine Kopie eines Objekts erstellt:


'use strict'

// Objektklonen
const obj1 = {
  nom: "martin",
  prénom: "jean"
};

// Klon (Kopie) von obj1 mit dem Spread-Operator
const obj2 = { ...obj1 }

// Überprüfungen
// obj2 verweist auf eine Kopie von obj1
console.log("obj2===obj1 :", obj1 === obj2)
console.log("obj2=", obj2)
  • Zeile 10: Der Kopiervorgang des Objekts [obj1]. Der Operator ... wird als Spread-Operator bezeichnet;

Die Ergebnisse der Ausführung lauten wie folgt:

1
2
obj2===obj1 : false
obj2= { nom: 'martin', 'prénom': 'jean' }
  • Zeile 1: Zeigt, dass die Referenzen [obj1] und [obj2] nicht auf dasselbe Objekt verweisen;
  • Zeile 2: zeigt, dass das Objekt, auf das [obj2] verweist, eine Kopie des Objekts ist, auf das [obj1] verweist;

5.9. Conclusion

Die Skripte in diesem Abschnitt haben gezeigt, dass das JavaScript-Literalobjekt dem Klasseninstanzobjekt in objektorientierten Sprachen ähnelt. Man kann darin Eigenschaften, Methoden sowie Getter und Setter definieren. Es handelt sich um ein dynamisches Objekt, dessen Eigenschaften zur Laufzeit definiert werden können. Es verhält sich dann wie ein Wörterbuch, dessen Elemente jeden beliebigen Typ haben können, insbesondere den Typ [fonction].

https://stahe.github.io
Dieses Tutorial, verfasst von Serge Tahé, wird der Öffentlichkeit unter den Bedingungen der Creative Commons Namensnennung – Nicht kommerziell – Weitergabe unter gleichen Bedingungen 3.0 Unported.