Hallo zusammen, diese Woche geht es um Javascript Objekte und deren Attribut Konfiguration. Mit Hilfe dieser Konfiguration können wir die les-, schreib- und iterierbarkeit einzelner Objekt-Attribute ganz gezielt steuern!

Worum geht es eigentlich genau?

Erst vor kurzem habe ich selbst gelernt das die Attribute von Javascript Objekten eine eigene Konfiguration beinhalten, die man auf den ersten Blick gar nicht sieht. Diese können wir mit der Methode „Object.getOwnPropertyDescriptor(<objekt>, '<attribut>);“ auslesen. Das ganze möchte ich euch anhand einiger Code-Beispiele näher bringen:

var obj = {
   a: 1,
   b: 2
};

console.log(Object.getOwnPropertyDescriptor(obj, 'a'));

Die letzte Zeile Code hat folgende Ausgabe zur Folge:

{value: 1, writable: true, enumerable: true, configurable: true}

Ich möchte kurz auf die einzelnen Werte eingehen:

• Value dürfte dabei noch der einfachste Wert sein – Der Inhalt dieses Feldes ist der Inhalt des Attributes selbst (in diesem Fall die Zahl „1„).
• Writable definiert, das dieses Attribut schreibbar ist – Das bedeuten, wir können mit Hilfe von obj.a = 123; den Wert überschreiben.
• Enumerable bedeutet, das dieses Attribut iterierbar ist – Sollten wir also über obj iterieren, würden wir (früher oder später) bei „a“ ankommen (Beispiel weiter unten).
• Configurable bedeutet, das diese Konfiguration veränderbar ist… Das heißt, wir können das Attributes z.B. auf lesenden Zugriff beschränken – Wie das geht erfahrt ihr im nächsten Absatz.

Attribut Konfiguration ändern

Sagen wir, wir möchten nicht das obj.a überschrieben wird… Dann können wir die Konfiguration für dieses Attribut einfach ändern! Wir setzen dazu „writable“ auf „false„:

var obj = {
   a:1
};

// Still writable...
obj.a = 2;
console.log(obj.a);

// Defining a new configuration.
Object.defineProperty(obj, 'a', {writable:false});

// This will have no effect.
obj.a = 123;
console.log(obj.a);

Dieser Quelltext würde folgende zwei Zeilen ausgeben:

2
2

Somit haben wir ein „readonly“ Attribut geschaffen! Natürlich können wir diesen Vorgang wieder Rückgängig machen… Außer wir schließen das Objekt ab (via Object.seal(); … Doch dazu komme ich nächste Woche).

Iterierbarkeit von Attributen ändern

Wir können in Javascript problemlos über Objekte iterieren, das ganze funktioniert folgendermaßen:

var i,
   obj = {
      a: 1,
      b: 2,
      c: 3
   };

for (i in obj) {
   console.log(i + ' -> ' + obj[i]);
}

Das Ergebnis schaut folgendermaßen aus:

a -> 1
b -> 2
c -> 3

Deaktivieren wir nun allerdings die Iteriarbeitkeit eines der Attribute…

var i,
   obj = {
      a: 1,
      b: 2,
      c: 3
   };

Object.defineProperty(obj, 'b', {enumerable:false});

for (i in obj) {
   console.log(i + ' -> ' + obj[i]);
}

Erhalten wir das folgende Ergebnis:

a -> 1
c -> 3

Konfiguration deaktivieren

Ebenso, wie wir die schreib- und iterierbarkeit ausschalten können, können wir auch die Konfigurierbarkeit eines Attributes ausschalten – Allerdings lässt sich dieser Vorgang nicht mehr rückgängig machen… Logisch, oder?

Browserkompatibilität

Es ist und bleibt ein leidiges Thema… Doch grade bei Javascript gibt es große Unterschiede zwischen den verschiedenen Browsern. Die oberen Beispiele der Attribut-Konfiguration funktionieren im Internet Explorer z.B. erst ab Version 9. Andere Browser, wie z.B. Opera unterstützen diese Technik überhaupt nicht.
Alle anderen aktuellen Browser haben damit keine Probleme!

Wenn ihr mehr zu diesem Thema lernen wollt kann ich euch nur 2ality.com ans Herz legen – Speziell dieser Beitrag geht sehr genau auf dieses Thema ein (Beide in Englisch). Nächste Woche werde ich dieses Thema selbst etwas vertiefen und auf die Methoden „Object.preventExtensions(<obj>);„, „Object.seal(<obj>);“ und „Object.freeze(<obj>);“ eingehen!

Bis dahin wünsche ich euch eine angenehme Woche und viel Spaß beim entwickeln!