Self-Wiki: OOP in JS

[Rolf B]

Hallo Matthias,

Closures finde ich als Unterkapitel von "Objektverfügbarkeit und this" fehlplatziert, das Thema ist so komplex, dass es einen eigenene Artikel verdient hat. Da hirne ich noch, wie man das balanciert.

• Funktionen
• Scopes
• this
• Closures
• Non-ES6 Module

Das überschneidet sich alles thematisch und wird in zig Artikeln immer wieder angesprochen und teils auch neu erklärt. Das ist sehr mühsam zu pflegen.

Einen Artikel zu Scopes habe ich angefangen, der ist noch unverlinkt und in Arbeit. Wenn der mal was taugt, möchte ich die viefältigen Erklärungen zu Scopes im Wiki möglichst weit ausdünnen und auf den Scopes-Artikel verweisen. Das bedeutet natürlich, dass dieser Artikel eine anfängergerechte Einführung braucht, aber dann auch einen Teil 2, der das Thema komplett diskutiert.

Die ES6-Module brauchen auch mehr Aufmerksamkeit. Den Module-Scope habe ich schon beschrieben, Eigenheiten von script type="module" stehen beim Script-Element. Der richtige Umgang mit import und export muss ausgebaut werden und dann muss man noch auf Tools zum Bündeln eingehen - denn ein mit ES6-Modulen aufgebautes System ohne Bündeler kann man nicht produktiv betreiben.

Zum Thema Getter/Setter: das sind spezielle Typen von Objekteigenschaften, die mit Hilfe von Funktionen realisiert sind.

{get [ausdruck]() { ... } }

sieht obskur aus, entspricht aber der Objektliteral-Syntax für Eigenschaften mit Namen, die aus einer Variablen stammen.

const währung = "$";
const obj = {
   get €() { return 17.50; },         // Fehler
   get '€'() { return 17.50; },       // Erzeugt die Eigenschaft €
   get [währung]() { return 12.34; }  // Erzeugt die Eigenschaft $
}

Das sind vertiefende Aspekte von Objekteigenschaften, aber eigentlich Syntaxzucker für das Anlegen von speziellen Eigenschaften mit Propertydeskriptoren. Das gehört also zusammen. Bis auf den Fehler erzeugen die folgenden Zeilen das Gleiche wie oben:

const obj = {};
Object.defineProperty(obj, '€', { enumerable: true, 
                                  configurable: true,
                                  get: function() { return 17.50; } });
Object.defineProperty(obj, währung, { enumerable: true, 
                                  configurable: true,
                                  get: function() { return 12.34; } });
//                Dieser Doppelpunkt ↑ ist richtig und wichtig!

Rolf