Startseite / Artikel / JavaScripts verstecktes Werkzeugset: Symbole, WeakMaps, Proxies und Generatoren

JavaScript Performance Memory Management Metaprogramming ECMAScript

JavaScripts verstecktes Werkzeugset: Symbole, WeakMaps, Proxies und Generatoren

Erfahren Sie, wie Symbole, WeakMap/WeakSet, Proxy/Reflect, FinalizationRegistry sowie Generatoren im Hintergrund funktionieren, um Speicherverluste zu verhindern und meta-programmatische Funktionen auf Framework-Ebene zu ermöglichen.

2046 Wörter

Entschlüsseln des verborgenen Motors hinter Ihren Lieblingsframeworks und endgültiges Beenden von Speicherverlusten

Meist stützt sich die JavaScript-Entwicklung auf ein vertrautes Kernwerkzeugset: const, let, Pfeilfunktionen, map/filter, Array-Destructuring sowie async/await. Dieses alltägliche Werkzeugset bewältigt den überwiegenden Teil dessen, was Sie entwickeln.

Doch die ECMAScript-Spezifikation enthält auch eine Reihe weniger bekannter Werkzeuge: Primitive Typen, spezialisierte Datenträger sowie Meta-Programmierungsmechanismen auf niedrigem Niveau, die in Einführungstutorials fast nie vorkommen. Autoren von Frameworks und Bibliotheken greifen ständig darauf zurück, um Speicherverluste zu vermeiden, Namenskollisionen aus dem Weg zu gehen, das interne Verhalten des Engines zu nutzen und große Codebasen stabil zu halten. Sobald Sie sie verstehen, erkennen Sie sie überall in den bereits verwendeten Abhängigkeiten.

Durch die Vertrautmachung mit diesen Funktionen ändert sich Ihre Art, über Lebensdauern von Objekten, Grenzen der Kapselung sowie Leistung bei der Ausführung nachzudenken. Im Folgenden wird eine Übersicht über Funktionen gegeben, von denen Sie in Produktionscode fast sicherlich profitiert haben, ohne zu wissen, dass sie vorhanden sind.

1. Symbole: Schlüssel, die niemals kollidieren

Symbol, das in ES6 hinzugefügt wurde, ist ein primitiver Typ, der neben string, number, boolean, null, undefined und bigint steht.

Jeder Aufruf von Symbol() erzeugt einen völlig neuen, einzigartigen Wert. Selbst zwei Symbole, die mit genau derselben Beschreibung erstellt werden, sind niemals gleich:

const id1 = Symbol('id');
const id2 = Symbol('id');

console.log(id1 === id2); // false

Der Text, den Sie an Symbol('id') übergeben, ist lediglich ein optionaler Label für die Ausgabe bei der Fehlersuche – er hat keinen Einfluss auf die Identität des Symbols.

Warum existieren Symbole überhaupt?

Vor dem Bestehen von Symbolen mussten Schlüssel für Objekte als Zeichenketten angegeben werden. Das stellte ein echtes Risiko dar: Wenn man eine Bibliothek schrieb, die interne Metadaten an ein von jemand anderem besessenes Objekt hinzufügte, konnte man leicht eine bereits vorhandene Eigenschaft überschreiben:

// Risky: Another script might already use `isProcessed`
user.isProcessed = true;

Symbole vermeiden das völlig, denn es gibt keine Möglichkeit, dass ein anderer Code versehentlich dasselbe Symbol erzeugt:

const TRACKING_ID = Symbol('trackingId');

const user = {
  name: 'Sarah',
  role: 'Admin'
};

// Safe: Nothing can clash with this exact key
user[TRACKING_ID] = 'txn_89412';

Der Unsichtbarkeitsumhang

Eigenschaften, die durch ein Symbol als Schlüssel gekennzeichnet sind, werden von den üblichen Reflektions- und Serialisierungswerkzeugen ignoriert:

for...in-Schleifen ignorieren sie.
Object.keys(user) lässt sie aus.
JSON.stringify(user) entfernt sie vollständig.

console.log(Object.keys(user)); // ['name', 'role']
console.log(JSON.stringify(user)); // '{"name":"Sarah","role":"Admin"}'

Dies bedeutet jedoch, dass Symbol-Schlüssel nicht wirklich geheim sind – der Aufruf von Object.getOwnPropertySymbols(user) gibt sie dennoch preis. Für gewöhnliche Iterations- und Serialisierungszielen bleiben sie jedoch verborgen, was sie zu einer geeigneten Wahl für interne Flags, gememorierte Werte sowie Metadaten auf Plugin-Ebene macht, die nicht in eine öffentliche API gelangen sollten.

Bekannte Symbole: Zugriff auf die Interna der Sprache

Die Sprache stellt außerdem eine Reihe von eingebauten Symbolen bereit, sogenannte bekannte Symbole, die als statische Eigenschaften des Symbol-Objekts bereitgestellt werden. Sie ermöglichen einen direkten Zugriff auf die Protokolle, von denen der Engine selbst abhängt.

Custom-Iteration über Symbol.iterator

Man kann jedes gewöhnliche Objekt mit for...of verwenden, indem man dieses Symbol selbst implementiert:

const inventory = {
  items: ['Keyboard', 'Monitor', 'Desk Pad'],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.items.length) {
          return { value: this.items[index++], done: false };
        }
        return { done: true };
      }
    };
  }
};

for (const item of inventory) {
  console.log(item); // Prints: Keyboard, Monitor, Desk Pad
}

Benutzerdefiniertes Verhalten bei der Zwangskonvertierung mit Symbol.toPrimitive

Dadurch können Sie genau bestimmen, was passiert, wenn Ihr Objekt in einen String oder eine Zahl umgewandelt wird:

const money = {
  amount: 250,
  currency: 'USD',
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') return this.amount;
    if (hint === 'string') return `${this.amount} ${this.currency}`;
    return this.amount; // default
  }
};

console.log(+money + 50); // 300
console.log(`${money}`);  // "250 USD"

2. WeakMap und WeakSet: Speicherräumung ohne manuelle Verwaltung

Um zu verstehen, warum WeakMap wichtig ist, hilft es zunächst, sich anzusehen, wie ein gewöhnlicher Map mit dem Speicher umgeht.

Ein regulärer Map behält eine starke Referenz zu jeder gespeicherten Schlüssel-Wert-Paarung bei. Das bedeutet, solange der Map selbst aktiv ist, können seine Schlüssel nicht als Abfall gesammelt werden – selbst dann nicht, wenn alle anderen Teile Ihrer Anwendung aufgehört haben, auf sie zu verweisen.

let cache = new Map();
let element = document.querySelector('#heavy-widget');

cache.set(element, { clicks: 0 });

// Later, the DOM node is removed:
element.remove();
element = null;

// Problem: The DOM node is still stuck in memory because `cache` holds it.

Dies ist eine häufige Ursache für Speicherverluste auf der Client-Seite, insbesondere in Single-Page-Anwendungen, bei denen Benutzer zwischen Ansichten wechseln, ohne dass eine vollständige Seitenlade stattfindet, um den Speicher zurückzusetzen.

Daher kommt WeakMap ins Spiel. Es enthält nur schwache Referenzen auf seine Schlüssel, was zwei wichtige Folgen hat:

Die Schlüssel müssen Objekte sein (oder in modernen Engines unregistrierte Symbole) – Primitive wie Zeichenketten oder Zahlen dürfen nicht als Schlüssel verwendet werden.
Sobald im Programm nichts anderes mehr auf ein Schlüsselobjekt verweist, kann der Garbage Collector es freigeben, und die entsprechende WeakMap-Eintragung verschwindet zusammen damit.

const metadataStore = new WeakMap();

function setupWidget(domNode) {
  metadataStore.set(domNode, { initializedAt: Date.now() });
}

// When domNode is removed from the DOM and its variable goes out of scope,
// the WeakMap entry is garbage-collected automatically.

Die in der Architektur eingebauten Kompromisse

Da die Abfallsammlung zu unvorhersehbaren Zeiten stattfindet, die vom Browser und nicht von Ihrem Code bestimmt werden, beschränkt WeakMap absichtlich die Möglichkeiten, die man damit hat:

Es ist nicht iterierbar: es gibt weder .forEach() noch for...of noch .keys().
Es gibt keine .size-Eigenschaft, sodass man nicht erkennen kann, wie viele Einträge derzeit vorhanden sind.
Nur vier Methoden stehen zur Verfügung: .get(), .set(), .has() und .delete().

Falls man die Schlüssel auflisten oder einen Größenwert abrufen könnte, würden die Ergebnisse davon abhängen, ob gerade eine Abfallsammlung stattgefunden hat – was das Verhalten des Programms faktisch unbestimmt machen würde. Durch Entfernung der Iterierbarkeit bleibt die API unabhängig vom Zeitpunkt der Abfallsammlung vorhersehbar.

Ein praktisches Muster: wirklich privater Instanzzustand

Bevor native private Klassenfelder (#field) weit verbreitet unterstützt wurden, war WeakMap die gängige Methode, um Klasseninstanzen einen wirklich privaten internen Zustand zu geben:

const privateData = new WeakMap();

class BankAccount {
  constructor(initialBalance) {
    privateData.set(this, { balance: initialBalance });
  }

  deposit(amount) {
    const data = privateData.get(this);
    data.balance += amount;
  }

  getBalance() {
    return privateData.get(this).balance;
  }
}

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // 150
console.log(account.balance);       // undefined (completely inaccessible)

Da die Instanz selbst (this) als Schlüssel verwendet wird, werden deren private Daten automatisch mit der Instanz selbst gelöscht, sobald diese nicht mehr irgendwo referenziert wird.

3. Proxy und Reflect: Metaprogrammierung, die Sie heute nutzen können

Proxy umhüllt ein Objekt und ermöglicht es Ihnen, seine grundlegendsten Operationen abzufangen – Eigenschaften zu lesen, zuweisen, Funktionen aufzurufen oder Schlüssel zu löschen.

Falls Sie jemals reaktiven Zustand in Vue 3 aktualisiert oder eine moderne reaktive Bibliothek dabei beobachtet haben, wie sie Änderungen automatisch verfolgt, haben Sie im Hintergrund mit einem Proxy interagiert.

const targetUser = { name: 'Alex', age: 28 };

const handler = {
  get(target, prop, receiver) {
    console.log(`Reading property "${prop}"`);
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    if (prop === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a valid number.');
    }
    console.log(`Setting "${prop}" to ${value}`);
    return Reflect.set(target, prop, value, receiver);
  }
};

const monitoredUser = new Proxy(targetUser, handler);

monitoredUser.age = 29; // Logs: Setting "age" to 29
console.log(monitoredUser.name); // Logs: Reading property "name" -> "Alex"
// monitoredUser.age = 'thirty'; // Throws TypeError

Möglicherweise haben Sie Reflect.get() und Reflect.set() innerhalb des Proxy-Handlers bemerkt. Reflect ist ein eingebautes globales Objekt mit Methoden, die die Operationen widerspiegeln, die ein Proxy abfangen kann. Jeder Trap, den Sie in einem Proxy-Handler definieren können, hat eine entsprechende Methode in Reflect, die dieselben Argumente entgegennimmt. Anstatt manuell etwas wie target[prop] = value innerhalb eines set-Traps zu schreiben – was bei Beteiligung von Prototypen oder Zugriffseigenschaften auf subtile Weise fehlschlagen kann – rufen Sie die passende Reflect-Methode auf, die das Standardverhalten des Engines sicher ausführt und ein Booleschwert zurückgibt, das anzeigt, ob die Operation tatsächlich erfolgreich war.

4. FinalizationRegistry und WeakRef: Beobachtung der Garbage Collection

Über einen langen Zeitraum gab es in JavaScript keine Möglichkeit, herauszufinden, wann ein Objekt tatsächlich vom Garbage Collector zurückgenommen wurde. ES2021 schloss diese Lücke mit zwei miteinander verbundenen, niedrigschwelligen APIs ab, die auf fortgeschrittener Systemprogrammierung ausgerichtet sind: WeakRef und FinalizationRegistry.

Ein WeakRef enthält eine Referenz auf ein Objekt, ohne den Garbage Collector daran zu hindern, es zurückzugreifen, und bietet gleichzeitig die Möglichkeit, das Objekt solange abzurufen, wie es noch aktiv ist:

let heavyAsset = { buffer: new ArrayBuffer(1024 * 1024 * 16) }; // 16MB buffer
const assetRef = new WeakRef(heavyAsset);

// Dereference to access
const asset = assetRef.deref();
if (asset) {
  // Asset still exists in memory
  console.log("Using cached asset");
} else {
  // Asset was collected by GC; reload it
  console.log("Asset was garbage collected");
}

FinalizationRegistry ergänzt dies, indem es die Registrierung eines Callbacks ermöglicht, der ausgelöst wird, sobald ein Objekt gesammelt wurde. Es wird in der Regel verwendet, um externe Ressourcen, die mit diesem Objekt verbunden sind, zu bereinigen, oder zur diagnostischen Protokollierung:

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`Cleanup hook: Resource "${heldValue}" was garbage collected.`);
});

(() => {
  const temporaryWorker = { id: 'worker_404' };
  registry.register(temporaryWorker, temporaryWorker.id);
  // temporaryWorker leaves scope here
})();

Seien Sie bei diesen beiden APIs vorsichtig. Die Zeitpunkt der Müllsammlung variiert je nach Browser und JavaScript-Engine und lässt sich weder vorhersagen noch erzwingen. Sie sollten niemals wichtige Anwendungslogik – wie das Speichern von Zuständen, die Bestätigung einer Transaktion oder alles, worauf Ihre Anwendung angewiesen ist – an einen Finalisierungs-Callback binden, da es keine Garantie dafür gibt, wann oder ob dieser überhaupt rechtzeitig ausgeführt wird.

5. Generatorfunktionen: Auf Wunsch pausieren und fortsetzen

Normale JavaScript-Funktionen folgen der Regel des Durchlaufs bis zur Vollendung: Sobald sie aufgerufen werden, führen sie weiter aus, bis sie auf ein return stoßen oder eine Ausnahme werfen, ohne dabei unterbrochen zu werden.

Generatorfunktionen, die mit der function*-Syntax definiert werden, brechen diese Regel. Sie können ihre Ausführung unterbrechen und später wieder aufnehmen, wobei das Schlüsselwort yield zur Markierung der Pausenpunkte verwendet wird.

function* idGenerator() {
  let id = 1;
  while (true) {
    yield `UID_${id++}`;
  }
}

const gen = idGenerator();
console.log(gen.next().value); // UID_1
console.log(gen.next().value); // UID_2
console.log(gen.next().value); // UID_3

Betrachten Sie genau die while (true)-Schleife innerhalb dieses Generators. In einer normalen Funktion würde eine solche endlose Schleife den Thread sofort blockieren. Innerhalb eines Generators hingegen stoppt die Ausführung sofort, sobald yield erreicht wird, wodurch die Kontrolle an den Aufrufer zurückgegeben wird – bis .next() erneut aufgerufen wird, passiert nichts weiter.

Deshalb eignen sich Generatoren hervorragend zum Durchlaufen großer Datenmengen, ohne diese vollständig im Speicher zu halten. Anstatt eine halbe Million Zeilen aus einer Datei in ein großes Array zu lesen, kann ein Generator jede relevante Zeile nacheinander liefern, sobald sie benötigt wird:

function* processLargeLogFile(lines) {
  for (const line of lines) {
    if (line.includes('ERROR')) {
      yield line.trim();
    }
  }
}

// Memory remains flat because lines are yielded one by one as consumed
for (const errorLine of processLargeLogFile(rawLines)) {
  sendToAlertService(errorLine);
}

Keine dieser Funktionen erfordert, dass Sie sofort eine bestehende Codebasis umgestalten. Der eigentliche Nutzen zeigt sich darin, zu wissen, wann man sie anstelle eines herkömmlichen Ansatzes einsetzen sollte – dieser würde sonst fragilen Code oder unnötigen Speicherbedarf verursachen.

Nächstes Mal, wenn Sie Metadaten an DOM-Elemente hinzufügen, die dynamisch erstellt und wieder entfernt werden, verwenden Sie einen WeakMap. Wenn Sie eine Plugin-Architektur entwerfen, bei der externer Code eigene, nicht kollidierende Schlüssel definieren muss, nutzen Sie einen Symbol. Und wenn Sie eine reaktive Datenschicht benötigen, die Änderungen automatisch verfolgt, bauen Sie diese auf einem Proxy auf.

Die Vertrautheit mit diesen Werkzeugen ist es, was das Schreiben von Anwendungscode vom Entwickeln skalierbaren Software-Systems unterscheidet.