JavaScript - ES5 Object Methods

Hallo zusammen, zukünftige JavaScript-Zauberer! Heute tauchen wir ein in die magische Welt der ES5 Object Methods. Keine Sorge, wenn Ihr mới im Programmieren seid – ich werde Euer freundlicher Guide durch dieses Abenteuer sein, und wir gehen schrittweise vor. Bis zum Ende dieses Tutorials werdet Ihr Objekte wie ein Profi manipulieren können!

JavaScript ES5 Object Methods

Bevor wir loslegen, lassen Sie uns schnell zusammenfassen, was Objekte in JavaScript sind. Denkt an ein Objekt als Behälter, der verwandte Informationen enthält. Zum Beispiel könnte ein "Auto"-Objekt Eigenschaften wie Farbe, Marke und Jahr enthalten.

let auto = {
farbe: "rot",
marke: "Toyota",
jahr: 2020
};

Jetzt hat ES5 mehrere mächtige Methoden zur Arbeit mit diesen Objekten eingeführt. Lassen Sie uns sie einzeln erkunden!

JavaScript Object.create() Methode

Die Object.create() Methode ermöglicht es uns, ein neues Objekt mit einem vorhandenen Objekt als Prototyp zu erstellen. Es ist, als ob Ihr JavaScript sagt: "Hey JavaScript, mach mir ein neues Objekt, das von diesem anderen Objekt erbt!"

let tier = {
makeSound: function() {
console.log("Ein allgemeiner Tierschrei");
}
};

let hund = Object.create(tier);
hund.makeSound(); // Ausgabe: Ein allgemeiner Tierschrei

hund.bark = function() {
console.log("Wuff wuff!");
};

hund.bark(); // Ausgabe: Wuff wuff!

In diesem Beispiel haben wir ein hund-Objekt erstellt, das vom tier-Objekt erbt. Der hund kann die makeSound-Methode vom tier verwenden, aber er hat auch seine eigene bark-Methode.

JavaScript Object.defineProperty() Methode

Object.defineProperty() ermöglicht es uns, eine Eigenschaft eines Objekts hinzuzufügen oder zu ändern. Es ist, als ob Ihr Auto nach dem Kauf eine neue Funktion hinzufügt!

let person = {};

Object.defineProperty(person, "name", {
value: "John",
writable: false,
enumerable: true,
configurable: true
});

console.log(person.name); // Ausgabe: John
person.name = "Jane"; // Das ändert den Namen nicht
console.log(person.name); // Ausgabe: John

Hier haben wir eine name Eigenschaft zum person-Objekt hinzugefügt. Wir haben sie als nicht schreibbar gesetzt, was bedeutet, dass wir ihren Wert nach der Initialisierung nicht ändern können.

JavaScript Object.defineProperties() Methode

Object.defineProperties() ist wie defineProperty(), aber auf Steroiden! Es ermöglicht uns, mehrere Eigenschaften gleichzeitig zu definieren.

let buch = {};

Object.defineProperties(buch, {
titel: {
value: "Der Große Gatsby",
writable: true
},
autor: {
value: "F. Scott Fitzgerald",
writable: false
}
});

console.log(buch.titel); // Ausgabe: Der Große Gatsby
console.log(buch.autor); // Ausgabe: F. Scott Fitzgerald

buch.titel = "Gatsby"; // Das funktioniert
buch.autor = "Scott"; // Das funktioniert nicht

console.log(buch.titel); // Ausgabe: Gatsby
console.log(buch.autor); // Ausgabe: F. Scott Fitzgerald

In diesem Beispiel haben wir zwei Eigenschaften für unser buch-Objekt auf einmal definiert. Der titel ist schreibbar, aber der autor nicht.

JavaScript Object.getOwnPropertyDescriptor() Methode

Diese Methode ermöglicht es uns, die Beschreibung einer Eigenschaft zu erhalten. Es ist, als ob man nach den Spezifikationen einer bestimmten Funktion Ihres Autos fragt.

let auto = {
marke: "Toyota"
};

let beschreibung = Object.getOwnPropertyDescriptor(auto, "marke");

console.log(beschreibung);
// Ausgabe:
// {
//   value: "Toyota",
//   writable: true,
//   enumerable: true,
//   configurable: true
// }

Hier erhalten wir die Beschreibung der marke Eigenschaft unseres auto-Objekts. Sie tells uns den Wert und ob die Eigenschaft schreibbar, enumerable und konfigurierbar ist.

JavaScript Object.getOwnPropertyNames() Methode

Diese Methode gibt ein Array aller Eigenschaften ( enumerabel oder nicht) zurück, die direkt in einem gegebenen Objekt gefunden werden. Es ist, als ob man eine Liste aller Funktionen Ihres Autos, auch der versteckten, bekommt!

let person = {
name: "John",
alter: 30
};

Object.defineProperty(person, "ssn", {
value: "123-45-6789",
enumerable: false
});

console.log(Object.getOwnPropertyNames(person));
// Ausgabe: ["name", "alter", "ssn"]

Obwohl wir ssn als nicht enumerable gemacht haben, enthält getOwnPropertyNames() es immer noch in der Liste.

JavaScript Object.getPrototypeOf() Methode

Diese Methode gibt das Prototyp des angegebenen Objekts zurück. Es ist, als ob man fragt: "Wer ist dein Elternteil?"

let tier = {
isst: true
};

let kaninchen = Object.create(tier);

console.log(Object.getPrototypeOf(kaninchen) === tier); // Ausgabe: true

Hier bestätigen wir, dass das Prototyp des kaninchen-Objekts indeed das tier-Objekt ist.

JavaScript Object.keys() Methode

Object.keys() gibt ein Array der eigenen enumerable Eigenschaftsnamen eines gegebenen Objekts zurück. Es ist, als ob man eine Liste aller sichtbaren Funktionen Ihres Autos bekommt.

let auto = {
marke: "Toyota",
modell: "Corolla",
jahr: 2020
};

console.log(Object.keys(auto));
// Ausgabe: ["marke", "modell", "jahr"]

Diese Methode gibt nur die enumerable Eigenschaften zurück, im Gegensatz zu getOwnPropertyNames(), die alle Eigenschaften zurückgibt.

JavaScript Object.freeze() Methode

Object.freeze() friert ein Objekt ein. Ein gefrorenes Objekt kann nicht mehr geändert werden. Es ist, als ob man sein Auto in einen Block von Eis legt – man kann seine Eigenschaften nicht mehr hinzufügen, entfernen oder ändern!

let auto = {
marke: "Toyota",
modell: "Corolla"
};

Object.freeze(auto);

auto.jahr = 2020; // Das funktioniert nicht
auto.marke = "Honda"; // Das funktioniert auch nicht

console.log(auto); // Ausgabe: { marke: "Toyota", modell: "Corolla" }

Nach dem Einfrieren des auto-Objekts können wir die jahr Eigenschaft nicht hinzufügen oder die marke ändern.

JavaScript Object.seal() Methode

Object.seal() versiegelt ein Objekt, verhindert das Hinzufügen neuer Eigenschaften und markiert alle vorhandenen Eigenschaften als nicht konfigurierbar. Es ist, als ob man sein Auto versiegelt – man kann keine neuen Funktionen hinzufügen, aber man kann die vorhandenen noch ändern.

let person = {
name: "John",
alter: 30
};

Object.seal(person);

person.geschlecht = "Männlich"; // Das funktioniert nicht
person.alter = 31; // Das funktioniert

delete person.name; // Das funktioniert nicht

console.log(person); // Ausgabe: { name: "John", alter: 31 }

Wir können alter ändern, aber wir können geschlecht nicht hinzufügen oder name löschen.

JavaScript Object.isFrozen() Methode

Diese Methode bestimmt, ob ein Objekt eingefroren ist. Es ist, als ob man überprüft, ob sein Auto wirklich in dem Eisblock gefangen ist!

let auto = {
marke: "Toyota"
};

console.log(Object.isFrozen(auto)); // Ausgabe: false

Object.freeze(auto);

console.log(Object.isFrozen(auto)); // Ausgabe: true

JavaScript Object.isSealed() Methode

Ähnlich wie isFrozen(), überprüft diese Methode, ob ein Objekt versiegelt ist.

let person = {
name: "John"
};

console.log(Object.isSealed(person)); // Ausgabe: false

Object.seal(person);

console.log(Object.isSealed(person)); // Ausgabe: true

JavaScript Object.preventExtensions() Methode

Diese Methode verhindert das Hinzufügen neuer Eigenschaften zu einem Objekt. Es ist, als ob man ein "Keine weiteren Funktionen"-Schild auf sein Auto stellt.

let auto = {
marke: "Toyota"
};

Object.preventExtensions(auto);

auto.modell = "Corolla"; // Das funktioniert nicht

console.log(auto); // Ausgabe: { marke: "Toyota" }

Nach dem Verhindern von Erweiterungen können wir die modell Eigenschaft nicht hinzufügen.

JavaScript Object.isExtensible() Methode

Diese Methode bestimmt, ob ein Objekt erweiterbar ist (ob neue Eigenschaften hinzugefügt werden können).

let auto = {
marke: "Toyota"
};

console.log(Object.isExtensible(auto)); // Ausgabe: true

Object.preventExtensions(auto);

console.log(Object.isExtensible(auto)); // Ausgabe: false

Hier ist eine Zusammenfassung aller Methoden, die wir behandelt haben:

Methode	Beschreibung
Object.create()	Erstellt ein neues Objekt mit dem angegebenen Prototypobjekt und Eigenschaften
Object.defineProperty()	Fügt eine benannte Eigenschaft, die durch einen gegebenen Deskriptor beschrieben wird, zu einem Objekt hinzu
Object.defineProperties()	Definiert neue oder ändert vorhandene Eigenschaften direkt auf einem Objekt, gibt das Objekt zurück
Object.getOwnPropertyDescriptor()	Gibt eine Eigenschaftsbeschreibung für eine eigene Eigenschaft eines Objekts zurück
Object.getOwnPropertyNames()	Gibt ein Array aller Eigenschaften, die direkt in einem gegebenen Objekt gefunden werden, zurück
Object.getPrototypeOf()	Gibt das Prototyp des angegebenen Objekts zurück
Object.keys()	Gibt ein Array der eigenen enumerable Eigenschaftsnamen eines gegebenen Objekts zurück
Object.freeze()	Frostet ein Objekt ein: anderes Code kann seine Eigenschaften nicht löschen oder ändern
Object.seal()	Versiegelt ein Objekt, verhindert das Hinzufügen neuer Eigenschaften und markiert alle vorhandenen Eigenschaften als nicht konfigurierbar
Object.isFrozen()	Bestimmt, ob ein Objekt eingefroren ist
Object.isSealed()	Bestimmt, ob ein Objekt versiegelt ist
Object.preventExtensions()	Verhindert das Hinzufügen neuer Eigenschaften zu einem Objekt
Object.isExtensible()	Bestimmt, ob ein Objekt erweiterbar ist

Und das war's! Ihr habt gerade eine großartige Tour durch die ES5 Object Methods gemacht. Denkt daran, Übung macht den Meister,also zögert nicht, diese Methoden in eurem eigenen Code auszuprobieren. Viel Spaß beim Programmieren, zukünftige JavaScript-Meister!

Credits: Image by storyset