JavaScript-Objekt – Shallow Freeze vs. Deep Freeze

Der Unterschied zwischen flachem Einfrieren und tiefem Einfrieren liegt darin, wie das Einfrierverhalten auf verschachtelte Objekte angewendet wird. Hier ist eine Aufschlüsselung der beiden Konzepte:

---

1. Flacher Frost

• Definition: Friert nur die Eigenschaften der obersten Ebene eines Objekts ein.
• Verhalten:
  • Verhindert das Hinzufügen, Entfernen oder Ändern der Eigenschaften der obersten Ebene.
  • Friert verschachtelte Objekte nicht ein; sie bleiben veränderlich.
• Beispiel:

const shallowObject = {
    name: "Alice",
    details: { age: 25, city: "New York" },
};

Object.freeze(shallowObject);

// Top-level properties are immutable
shallowObject.name = "Bob"; // Ignored
shallowObject.newProp = "test"; // Ignored

// Nested objects are still mutable
shallowObject.details.age = 30; // Allowed

console.log(shallowObject);
// Output: { name: "Alice", details: { age: 30, city: "New York" } }

---

2. Tiefkühl

• Definition: Friert das Objekt zusammen mit allen seinen verschachtelten Objekten und Arrays rekursiv ein.
• Verhalten:
  • Stellt sicher, dass kein Teil des Objekts (oberste Ebene oder verschachtelt) geändert werden kann.
• Beispiel:

const deepObject = {
    name: "Alice",
    details: { age: 25, city: "New York" },
};

// Deep freeze function
function deepFreeze(object) {
    const propertyNames = Object.getOwnPropertyNames(object);
    for (const name of propertyNames) {
        const value = object[name];
        if (value && typeof value === 'object') {
            deepFreeze(value); // Recursively freeze
        }
    }
    return Object.freeze(object);
}

deepFreeze(deepObject);

// Neither top-level nor nested properties can be changed
deepObject.name = "Bob"; // Ignored
deepObject.details.age = 30; // Ignored

console.log(deepObject);
// Output: { name: "Alice", details: { age: 25, city: "New York" } }

---

Vergleichstabelle

Funktion Flacher Frost Tiefgefrieren

Feature	Shallow Freeze	Deep Freeze
Scope	Only freezes top-level properties.	Freezes top-level and nested objects.
Nested Object Mutability	Mutable.	Immutable.
Implementation	Object.freeze(object).	Custom recursive function with Object.freeze().
Example Mutation	Modifications to nested objects are allowed.	No modifications allowed at any level.

Geltungsbereich Friert nur Eigenschaften der obersten Ebene ein. Friert Objekte der obersten Ebene und verschachtelte Objekte ein. Veränderlichkeit verschachtelter Objekte Veränderlich. Unveränderlich. Implementierung Object.freeze(object). Benutzerdefinierte rekursive Funktion mit Object.freeze(). Beispielmutation Änderungen an verschachtelten Objekten sind zulässig. Änderungen sind auf keiner Ebene zulässig.

---

Anwendungsfälle

1. Flacher Frost:

   • Geeignet, wenn nur die Eigenschaften der obersten Ebene unveränderlich sein müssen.
   • Beispiele: Konfigurationen, bei denen verschachtelte Eigenschaften unabhängig voneinander verwaltet werden.

2. Tiefgefrieren:

   • Ideal, wenn vollständige Unveränderlichkeit für die gesamte Objekthierarchie erforderlich ist.
   • Beispiele: Sicherstellung der Datenkonsistenz für tief verschachtelte Objekte in der Zustandsverwaltung.

Überlegungen

• Leistung:
  • Tiefgefrieren kann bei großen oder tief verschachtelten Objekten rechenintensiv sein.
• Zyklische Referenzen:
  • Wenn das Objekt Zirkelverweise enthält, müssen Sie besuchte Objekte verfolgen, um eine unendliche Rekursion zu vermeiden.

Umgang mit zyklischen Referenzen

Um zyklische Referenzen zu verarbeiten, können Sie ein WeakSet der besuchten Objekte verwalten:

const shallowObject = {
    name: "Alice",
    details: { age: 25, city: "New York" },
};

Object.freeze(shallowObject);

// Top-level properties are immutable
shallowObject.name = "Bob"; // Ignored
shallowObject.newProp = "test"; // Ignored

// Nested objects are still mutable
shallowObject.details.age = 30; // Allowed

console.log(shallowObject);
// Output: { name: "Alice", details: { age: 30, city: "New York" } }

Dies verhindert eine unendliche Rekursion für zyklische Referenzen.

Das obige ist der detaillierte Inhalt vonJavaScript-Objekt – Shallow Freeze vs. Deep Freeze. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!