JavaScript Academy · Lektion

Flaches und tiefes Einfrieren

Verstehen Sie, wie weit das Einfrieren reicht.

Flaches und tiefes Einfrieren ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Freeze ist oberflächlich

Object.freeze sperrt nur die oberste Ebene eines Objekts. Jedes darin enthaltene verschachtelte Objekt und Array bleibt vollständig veränderbar.

Das überrascht viele Entwickler und führt zu schwer erkennbaren Fehlern.

Die oberflächliche Grenze nachweisen

Frieren Sie ein Objekt mit einem verschachtelten Objekt ein. Die oberste Ebene ist gesperrt, aber das verschachtelte Objekt kann weiterhin geändert werden.

const user = Object.freeze({
  name: 'Ada',
  address: { city: 'London' }
});

user.name = 'Grace';
user.address.city = 'Paris';

console.log(user.name);
console.log(user.address.city);

Auch verschachtelte Arrays

Arrays innerhalb eines eingefrorenen Objekts sind ebenfalls ungeschützt. Sie können Elemente hinzufügen, entfernen und neu zuweisen.

const state = Object.freeze({ tags: ['a', 'b'] });

state.tags.push('c');
state.tags[0] = 'X';

console.log(state.tags);

isFrozen bestätigt das

Das verschachtelte Objekt liefert für isFrozen den Wert false, was bestätigt, dass das Einfrieren nicht in das Objekt hineinwirkte.

const obj = Object.freeze({ inner: { v: 1 } });

console.log(Object.isFrozen(obj));
console.log(Object.isFrozen(obj.inner));

deepFreeze implementieren

Um alles zu sperren, verwenden Sie Rekursion: Frieren Sie das Objekt ein und frieren Sie anschließend jede verschachtelte Objekteigenschaft ein. Das nennt man tiefes Einfrieren.

function deepFreeze(obj) {
  for (const key of Object.keys(obj)) {
    const value = obj[key];
    if (value && typeof value === 'object') {
      deepFreeze(value);
    }
  }
  return Object.freeze(obj);
}

const data = deepFreeze({ a: { b: { c: 1 } } });
data.a.b.c = 999;
console.log(data.a.b.c);

deepFreeze bei Arrays

Arrays sind ebenfalls Objekte, daher friert dieselbe Rekursion auch sie ein. Das Hinzufügen von Elementen und das Schreiben in Elemente werden dann auf jeder Ebene blockiert.

function deepFreeze(obj) {
  for (const key of Object.keys(obj)) {
    const value = obj[key];
    if (value && typeof value === 'object') deepFreeze(value);
  }
  return Object.freeze(obj);
}

const state = deepFreeze({ list: [1, 2, 3] });
state.list.push(4);
state.list[0] = 99;
console.log(state.list);

Tiefes Einfrieren überprüfen

Nach dem tiefen Einfrieren liefert jedes verschachtelte Objekt für isFrozen den Wert true.

function deepFreeze(obj) {
  for (const key of Object.keys(obj)) {
    const v = obj[key];
    if (v && typeof v === 'object') deepFreeze(v);
  }
  return Object.freeze(obj);
}

const o = deepFreeze({ a: { b: 1 } });
console.log(Object.isFrozen(o));
console.log(Object.isFrozen(o.a));

Zyklen absichern

Wenn ein Objekt auf sich selbst verweist, läuft eine naive Rekursion endlos. Überspringen Sie bereits eingefrorene Objekte, um sicher zu bleiben.

function deepFreeze(obj) {
  if (Object.isFrozen(obj)) return obj;
  for (const key of Object.keys(obj)) {
    const v = obj[key];
    if (v && typeof v === 'object') deepFreeze(v);
  }
  return Object.freeze(obj);
}

const a = { name: 'a' };
a.self = a;
deepFreeze(a);
console.log(Object.isFrozen(a.self));

Kosten des tiefen Einfrierens

Tiefes Einfrieren besucht jeden verschachtelten Wert. Bei großen Strukturen kostet das Zeit und Speicher. Frieren Sie nur ein, was wirklich geschützt werden muss, etwa gemeinsam genutzte Konfigurationen oder Konstanten.

function deepFreeze(obj) {
  if (Object.isFrozen(obj)) return obj;
  Object.keys(obj).forEach(k => {
    const v = obj[k];
    if (v && typeof v === 'object') deepFreeze(v);
  });
  return Object.freeze(obj);
}

const small = deepFreeze({ a: 1, b: { c: 2 } });
console.log('frozen deeply:', Object.isFrozen(small.b));

Wann oberflächliches Einfrieren genügt

Wenn ein Objekt nur primitive Werte enthält, schützt ein oberflächliches Object.freeze es bereits vollständig. Tiefes Einfrieren ist nur bei verschachtelten Objekten oder Arrays erforderlich.

const flat = Object.freeze({ a: 1, b: 'two', c: true });
flat.a = 100;
console.log(flat.a);
console.log(Object.isFrozen(flat));

Warum das wichtig ist

Das Verständnis des Unterschieds zwischen oberflächlichem und tiefem Einfrieren verhindert die falsche Annahme, ein eingefrorenes Objekt sei vollständig unveränderlich. Bei verschachtelten Daten müssen Sie rekursiv vorgehen. Als Alternative zu Mutationen behandeln die nächsten Lektionen unveränderliche Aktualisierungsmuster, die kopieren statt einzufrieren.

const config = Object.freeze({ db: { host: 'local' } });
config.db.host = 'changed';
console.log('shallow freeze leaked:', config.db.host);

Kurze Überprüfung

Können Sie nach Object.freeze({ a: { b: 1 } }) das verschachtelte b ändern?

Zusammenfassung: oberflächliches und tiefes Einfrieren

Sie haben die Tiefengrenze des Einfrierens kennengelernt:

Object.freeze ist oberflächlich; verschachtelte Objekte und Arrays bleiben veränderbar.
deepFreeze arbeitet rekursiv, um jede Ebene zu sperren.
Sichern Sie sich gegen Zyklen ab, indem Sie bereits eingefrorene Objekte überspringen.
Tiefes Einfrieren hat Kosten. Frieren Sie daher nur ein, was geschützt werden muss.

Häufig gestellte Fragen

Ist die Lektion „Flaches und tiefes Einfrieren“ kostenlos?

Ja — der vollständige Text von „Flaches und tiefes Einfrieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Flaches und tiefes Einfrieren“?

Verstehen Sie, wie weit das Einfrieren reicht. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Flaches und tiefes Einfrieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy