Hallo zusammen, wie letzte Woche erwähnt geht es Heute ein Stück weiter mit der Objekt-Orientierung im Javascript Umfeld. Dabei lernen wir Heute drei Methoden zum verändern von Javascript Objekten kennen:

  • Object.preventExtensions(<object>); – „Verhindern von Erweiterung“
  • Object.seal(<object>); – „Abschließen der Attribute“
  • Object.freeze(<object>); – „Einfrieren“

Einen großen Teil meiner Informationen habe ich hier gefunden: 2ality.com (ein SEHR interessanter Blog!).

Erweiterung von Javascript Objekten verhindern (preventExtensions)

In Javascript kann verhindert werden, das Objekten neue Attribute hinzugefügt werden – Das ganze läuft unter dem Stichwort „extend“ (erweitern) bzw. in diesem Fall „preventExtension“ (verhindern von Erweiterung). Damit ihr euch das ganze etwas besser vorstellen könnt gibt es ein schönes kleines Code-Beispiel:

// Defining an object.
var obj = {
   a: 1
};

// This will work...
obj.b = 2;

Object.preventExtensions(obj);

// Fails without error message.
obj.c = 3;

console.log(obj.c); // Returns "undefined".
console.log(obj); // Returns "{a: 1, b: 2}".

Das hinzufügen eines neuen Attributes funktioniert zwar nicht, wirft aber auch keine Fehler – Befinden wir uns allerdings im „strict mode“ würde ein Fehler geworfen werden „TypeError: Can’t add property c, object is not extensible„.
Sobald wir also „Object.preventExtensions(<object>);“ aufrufen, lassen sich keine weiteren Attribute mehr hinzufügen. Vorhandene Attribute lassen sich allerdings noch verändern und löschen:

obj.a = 3;

console.log(obj); // Returns "{a: 3, b: 2}".
delete obj.a;
console.log(obj); // Returns "{b: 2}".

Es kann natürlich auch überprüft werden, ob ein Objekt diesen Zustand hat:

Object.isExtensible(obj); // Returns "false".

Abschließen der Attribute (seal)

Das Abschließen eines Objektes hat die gleichen Folgen, wie das verhindern der Erweiterung – setzt aber noch einen drauf: Sobald die Attribute „abgeschlossen“ sind, können wir deren Konfiguration nicht mehr ändern… Was es mit der „Konfiguration von Attributen“ auf sich hat, habe ich letzte Woche erklärt.

Schließen wir die Attribute eines Objektes also ab, lässt sich dessen Konfiguration nicht mehr ändern! Das ganze funktioniert mit Hilfe von „Object.seal(<object>);„:

var obj = {
   a: 1
};

Object.getOwnPropertyDescriptor(obj, 'a');
// Returns "{ ... configurable: true}".

Object.seal(obj);

Object.getOwnPropertyDescriptor(obj, 'a');
// Returns "{ ... configurable: false}".

Ein Aufruf von Object.defineProperty(obj, 'a', ...); wird also (Bis auf eine Ausnahme) keinen Einfluss mehr auf die Konfiguration haben. Die Ausnahme ist folgende:
Aufgrund „historischer Gründe“ ist es möglich einem unkonfigurierbaren Attribut die Schreibrechte zu entziehen ({writable: false}).

Versuchen wir ein Attribut des abgeschlossenen Objekts dennoch zu verändern, bekommen wir eine Fehlermeldung (auch außerhalb des strict mode): „TypeError: Cannot redefine property: <attribut-name>„.

Übrigens kann auch dieser Status abgefragt werden 🙂

Object.isSealed(obj); // Returns "true".

Ein Objekt einfrieren (freeze)

Als letzte Stufe ist es uns möglich ein Objekt komplett einzufrieren – In diesem Zustand sind alle Attribute „readonly“ und das Objekt lässt sich nicht erweitern… Also quasi wie Object.preventExtensions(); + Object.seal(); (nachdem allen Attributen das Schreibrecht entzogen wurde). Der Zustand eines solchen Objektes lässt sich nicht wiederherstellen!

Ein eingefrorenes Objekt kann beispielsweise als Konstanten-Register verwendet werden – Es müssen lediglich alle Konstanten vor dem „Object.freeze();“ hinzugefügt worden sein 😉 Um diesen Punkt zu vervollständigen, gibt es auch hier wieder ein wenig Quellcode:

var constants = {
   HELLO: "World",
   FOO: "bar"
};

Object.freeze(constants);

// Will, once again, fail silently.
constants.HELLO = 'Goodbye!';

// Extending will also fail without error.
constants.MY_CONST = 'New constant!';

console.log(constants);
// Returns "{HELLO: "World", FOO: "bar"}".

Und natürlich lässt sich auch auf diesen Zustand prüfen

Object.isFrozen(constants);
// Returns "true".

Oh, übrigens möchte ich mir angewöhnen meine Quelltext-Beispiele englisch zu halten… Nur mal so am Rande 😉

Und damit möchte ich mich für diese Woche auch schon wieder verabschieden… Ich hoffe ich konnte euch etwas neues zeigen und würde mich freuen wenn ihr auch nächste Woche wieder vorbei schaut! Bis dahin wünsche ich euch eine angenehme Woche und natürlich Happy Coding!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.