5. Literalobjekte
Hier bezeichnen wir Objekte, die wörtlich im Code definiert sind, als „Literalobjekte“. JavaScript kennt das Konzept von Klassen und Klasseninstanzobjekten. Daher handelt es sich hierbei nicht um die Art von Objekten, die wir gerade besprechen.
5.1. Skript [obj-01]
Hier stellen wir die grundlegenden Eigenschaften von Literalobjekten vor. Die wichtigste davon ist, dass das Objekt über einen Zeiger manipuliert wird.
'use strict';
// an empty object
const obj1={};
// object properties can be dynamically created
obj1.prop1="abcd";
console.log('obj1=',obj1);
// other property
obj1.prop2=[1,2,3];
console.log("obj1=",obj1);
// another property with a different notation
obj1['prop3']=true;
console.log("obj1=",obj1);
// obj1 is a reference to the object (pointer), not the object itself
const obj2=obj1;
// obj2 and obj1 point to the same object
obj2.prop1="xyzt";
console.log("obj1=",obj1);
console.log("obj2=",obj2);
// properties can be variables
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 manipuliert. Daher ist [obj1] ein Zeiger. Das Ändern des Objekts, auf das der Zeiger verweist, hat keine Auswirkungen auf den Zeiger [obj1]. Aus diesem Grund 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 letztere 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 Kopie der Objektreferenz und nicht des Objekts selbst ist;
5.2. Skript [obj-02]
Dieses Skript veranschaulicht, dass die Eigenschaften eines Objekts ein Objekt als Wert haben können. Dies führt zu mehrstufigen Objekten. Wir stellen außerdem das globale Objekt [JSON] vor, das die Konvertierung von Objekten in Zeichenfolgen und von Zeichenfolgen in Objekte ermöglicht.
'use strict';
// a multi-level object
const personne = {
prénom: "martin",
âge: 12,
père: {
prénom: "paul",
âge: 45
},
mère: {
prénom: "micheline",
âge: 42
}
}
// access to properties
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 can display objects
console.log("personne=", personne);
console.log("mère=", personne.mère);
// you can also display the jSON string of the
let json = JSON.stringify(personne);
console.log("jSON=", json);
// you can reread the jSON
let personne2 = JSON.parse(json);
console.log("père=", personne2.père);
Kommentare
- Zeile 24: Konvertierung eines JavaScript-Objekts in eine JSON-Zeichenkette;
- Zeile 27: Konvertierung einer JSON-Zeichenkette 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',
'âge': 12,
'père': { 'prénom': 'paul', 'âge': 45 },
'mère': { 'prénom': 'micheline', 'âge': 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 JSON-Zeichenkette müssen Eigenschaften ebenso wie Zeichenfolgenwerte in Anführungszeichen gesetzt werden;
5.3. Skript [obj-03]
Dieses Skript führt das Konzept von Gettern und Settern für die Eigenschaften eines Objekts ein:
'use strict';
// object getters and setters
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);
// the object itself
console.log("personne=", personne);
// this does not prevent direct access to property [_nom]
personne._nom = "xyz";
console.log("personne=", personne);
Kommentare
- Zeilen 5–7: Definition eines [Getters], einer Funktion, die im Allgemeinen den Wert einer Objekteigenschaft zurückgibt, aber eigentlich alles zurückgeben kann. Das Schlüsselwort [function] wird durch das Schlüsselwort [get] ersetzt;
- Zeile 7: Der Getter gibt die Eigenschaft [_name] zurück. Beachten Sie, dass diese Eigenschaft nicht deklariert werden muss;
- Zeilen 10–13: Definition eines [Setter], einer Funktion, die im Allgemeinen den empfangenen Wert einer Objekteigenschaft zuweist, aber eigentlich alles tun kann. Das Schlüsselwort [function] wird durch das Schlüsselwort [set] ersetzt. Der [Setter] kann verwendet werden, um den als Parameter an den [Setter] übergebenen Wert zu validieren;
- Zeile 16: Die Funktion [set name] wird implizit aufgerufen;
- Zeile 18: Die Funktion [get name] wird implizit aufgerufen;
- Zeile 22: zeigt, dass die Verwendung von Gettern/Settern im Ermessen des Entwicklers liegt. Wenn der Entwickler den Namen der von ihm 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' }
Beachte Zeilen 5–6: [console.log] zeigt auch Eigenschaften an, die Funktionen sind.
5.4. Skript [obj-04]
Dieses Skript zeigt drei Möglichkeiten, die Namen der Eigenschaften eines Objekts zu schreiben, und zwei Möglichkeiten, auf sie zuzugreifen.
'use strict';
// object property names may be literal [name], surrounded by apostrophes ['name'], or may have a double quotation mark ['name']
// or quotation marks ["name"]
// literal
const obj1 = {
nom: "martin",
prénom: "jean"
};
console.log("prénom=", obj1.prénom);
// surrounded by apostrophes
const obj2 = {
'nom': "martin",
'prénom': "jean"
};
console.log("nom=", obj2.nom);
// surrounded by quotation marks
const obj3 = {
"nom": "martin",
"prénom": "jean"
};
// two possible syntaxes for accessing the [name] property
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 Literalobjekts Funktionen sein können. Dies ist einem Klasseninstanzobjekt sehr ähnlich, das über Eigenschaften und Methoden verfügt.
'use strict';
// an object can have properties of type [function]
const personne = {
// properties
prénom: "martin",
âge: 12,
père: {
prénom: "paul",
âge: 45
},
mère: {
prénom: "micheline",
âge: 42
},
// method
toString: function () {
return JSON.stringify(this);
}
}
// use
console.log("personne=", personne);
console.log("personne.toString=", personne.toString());
- Zeilen 17–19: eine interne Methode des Objekts. In dieser Methode greifen wir mithilfe des Schlüsselworts [this] (Zeile 18) auf die Eigenschaften des Objekts zu. [this] bezieht sich auf das Objekt selbst, und [this.firstName] bezieht sich auf dessen Eigenschaft [firstName];
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',
'âge': 12,
'père': { 'prénom': 'paul', 'âge': 45 },
'mère': { 'prénom': 'micheline', 'âge': 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 zugreift, wenn deren Namen nicht im Voraus bekannt sind.
'use strict';
// an object can have properties of type [function]
let personne = {
// properties
prénom: "martin",
âge: 12,
père: {
prénom: "paul",
âge: 45
},
mère: {
prénom: "micheline",
âge: 42
},
// method
toString: function () {
return JSON.stringify(this);
}
}
// use
console.log(personne);
// properties
console.log("-----------------------");
for (const key in personne) {
if (personne.hasOwnProperty(key)) {
const element = personne[key];
console.log(key, "=", element);
}
}
// to escape the eslint warning (1)
console.log("-----------------------");
for (const key in personne) {
if (Object.prototype.hasOwnProperty.call(personne, key)) {
const element = personne[key];
console.log(key, "=", element);
}
}
// to escape the eslint warning (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, der die Liste der Eigenschaften (ohne Methoden) eines Objekts abruft. Dieser Code löst eine ESLint-Warnung aus:
- Zeilen 32–39: Der Code, mit dem wir die ESLint-Warnung umgehen können. Wir verwenden den Prototyp der Klasse [Object];
- Zeilen 41–47: Oder wir können die Warnung einfach deaktivieren (Zeile 43);
5.7. Skript [obj-07]
Das Skript [obj-07] demonstriert die Möglichkeit, ein Objekt zu destrukturieren:
'use strict';
// destructuring
// literal
const obj1 = {
nom: "martin",
prénom: "jean"
};
// destructuring obj1 into variables [n,p]
const { nom: n, prénom: p } = obj1;
console.log("n=", n, "p=", p);
// destructure obj1 in variables [n2,p2]
function f({ nom: n2, prénom: p2 }) {
console.log("f-n2=", n2, "f-p2=", p2);
}
f(obj1);
// destructuring obj1 into variables [last name,first name]
function g({ nom: nom, prénom: prénom }) {
console.log("g-nom=", nom, "g-prénom=", prénom);
}
g(obj1);
// destructuring obj1 into variables [last name,first name]
// with shortened notation equivalent to h({name:surname,firstname:firstname})
function h({ nom, prénom }) {
console.log("h-nom=", nom, "h-prénom=", prénom);
}
h(obj1);
Kommentare
- Zeile 11: Die geschweiften Klammern {} ermöglichen die Destrukturierung. Die Syntax
const { nom: n, prénom: p } = obj1
erzeugt zwei Variablen [n] und [p] und entspricht:
const n = obj1.nom
const p = obj1.prénom
Die Deklaration könnte wie folgt geschrieben werden:
const { nom => n, prénom => p } = obj1
um anzugeben, dass die Werte der Attribute [lastName, firstName] in die Variablen [n, p] übernommen werden;
- Die Destrukturierungsoperation wird in den Zeilen 15, 21 und 28 wiederholt. Jedes Mal zeigt das Vorhandensein von geschweiften Klammern {} an, dass ein Objekt in Variablen zerlegt wird;
- Zeile 28 könnte verwirrend sein. Es handelt sich um eine Kurzform für die Notation:
function h({ nom : nom, prénom : prénom })
Die Ergebnisse der Ausführung lauten wie folgt:
5.8. Skript [obj-08]
Das Skript [obj-08] zeigt, wie man eine Kopie eines Objekts erhält:
'use strict'
// object cloning
const obj1 = {
nom: "martin",
prénom: "jean"
};
// clone (copy) of obj1 with the spread operator
const obj2 = { ...obj1 }
// checks
// obj2 points to a copy of obj1
console.log("obj2===obj1 :", obj1 === obj2)
console.log("obj2=", obj2)
- Zeile 10: die Operation zum Kopieren des Objekts [obj1]. Der ...-Operator wird als Spread-Operator bezeichnet;
Die Ergebnisse der Ausführung lauten wie folgt:
- 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. Fazit
Die Skripte in diesem Abschnitt haben gezeigt, dass das JavaScript-Literalobjekt dem Klasseninstanzobjekt in objektorientierten Sprachen ähnelt. Man kann darauf Eigenschaften, Methoden und Getter/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, einschließlich des Typs [function].