JS-Objektkonstruktor Object.freeze

JS-Objektkonstruktor Object.freeze

Überblick

Object.freeze(obj) kann ein Objekt einfrieren. Ein eingefrorenes Objekt kann nicht mehr verändert werden;

Wenn ein Objekt eingefroren ist, können Sie ihm keine neuen Eigenschaften hinzufügen, vorhandene Eigenschaften löschen, die Aufzählbarkeit, Konfigurierbarkeit und Schreibbarkeit vorhandener Eigenschaften ändern oder die Werte vorhandener Eigenschaften ändern.

Darüber hinaus kann der Prototyp eines Objekts nach dem Einfrieren nicht mehr geändert werden. freeze() gibt dasselbe Objekt zurück wie das übergebene Argument.

JavaScriptDemo: Object.freeze()

const obj = {
  Stütze: 42
}
Objekt.freeze(obj)

obj.prop = 33 // Der strenge Modus löst einen Fehler aus.

console.log(obj.prop) // 42

Beispiel

1) Objekt einfrieren

var obj = {
  Eigenschaft: Funktion() {},
  foo:'Leiste'
}

// Sowohl das als Parameter übergebene Objekt als auch das zurückgegebene Objekt werden eingefroren // es besteht also keine Notwendigkeit, das zurückgegebene Objekt zu speichern (da beide Objekte gleich sind)
var o = Objekt.freeze(obj)
o === obj // wahr

// Alle Änderungen von jetzt an haben keine Wirkung mehr obj.foo = 'he' // Nichts tun Obj.hxx = 'he' // Diese Eigenschaft nicht hinzufügen // Versuchen, die Eigenschaft über Object.defineProperty zu ändern // Die beiden folgenden Anweisungen lösen eine Ausnahme aus Object.defineProperty(obj,'foo',{value:'yy'})
Object.defineProperty(Objekt,'Geschlecht',{Wert:'Geschlecht'})

// Der Prototyp kann auch nicht geändert werden // Die folgenden zwei Anweisungen lösen eine Exception aus Object.setPrototypeOf(obj,{x:20})
Obj.__prorp__ = {x:20}

2) Array einfrieren

sei a = [0]
Object.freeze(a) // Jetzt kann das Array nicht mehr geändert werden a[0] = 1 // Fehlgeschlagen a.push(2) // Fehlgeschlagen

Ein eingefrorenes Objekt ist unveränderlich. Aber das ist nicht immer so. Das Folgende zeigt, dass das gefrorene Objekt kein konstantes Objekt ist (flaches Einfrieren).

3) Flaches Einfrieren

lass obj = {
  intern: {}
}

Objekt.freeze(obj)
obj.internal.a = "er"
console.log(obj.internal.a) // er

Um ein Objekt unveränderlich zu machen, müssen Sie jede Eigenschaft des Typs Objekt rekursiv einfrieren (Deep Freeze).

4) Tiefkühlen

deepFreeze = (Objekt) => {
  var propNames = Object.getOwnPropertyNames(obj);
  propNames.forEach(Funktion (Name) {
    var prop = obj[name];
    wenn (Typ der Eigenschaft == 'Objekt' und Eigenschaft !== null) {
      deepFreeze(Eigenschaft);
    }
  });
  Objekt.einfrieren(obj);
}


deepFreeze1 = (Objekt) => {
  var prop, propName
  Objekt.freeze(obj)
  für (Eigenschaftsname in Objekt) {
    prop = obj[Eigenschaftsname]
    wenn (!obj.hasOwnProperty(propName) || !(typeof prop === "object") || Object.isFrozen(prop)) {
      // Eigenschaften in der Prototypkette und bei eingefrorenen Objekten überspringen.
      weitermachen
    }
    deepFreeze1(Eigenschaft)
  }
}

Die Verwendung von Deep Freeze erfolgt normalerweise, wenn wir eine Eigenschaft benötigen, diese jedoch leer ist oder am Anfang nicht existiert. Dann müssen Sie nur einen Anfangswert festlegen

Titel: "Floor Sales",
Wert: "",
Optionen: [],

Der Sinn der Existenz

Wenn Sie über ein riesiges Array oder Objekt verfügen und sicher sind, dass sich die Daten nicht ändern, kann die Verwendung von Object.freeze() die Leistung erheblich verbessern. Object.freeze() friert den Wert ein, Sie können die Referenz auf die Variable dennoch ersetzen.

neuer Blick ({
  Daten: {
    // Vue bindet Getter und Setter nicht an Objekte in der Liste: Object.freeze([
      { Wert: 1 },
      { Wert: 2 }
    ])
  },
  montiert () {
     // Die Schnittstelle antwortet nicht this.list[0].value = 100;


     // Die folgenden zwei Methoden antworten auf this.list = [
       { Wert: 100 },
       { Wert: 200 }
     ];
     diese.Liste = Objekt.einfrieren([
       { Wert: 100 },
       { Wert: 200 }
     ]);
  }
})

Oben finden Sie den detaillierten Inhalt von Object.freeze des JS-Objektkonstruktors. Weitere Informationen zu JS Object.freeze finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • JavaScript-Wissen: Konstruktoren sind auch Funktionen
  • Analyse des JavaScript-Konstruktorprinzips und des Implementierungsprozesses
  • Vererbung und Instanziierungsmethoden von JavaScript-Klassen
  • Der Unterschied zwischen der Verwendung neuer und der Nichtverwendung von Instanziierungsobjekten in Javascript
  • Eine kurze Diskussion über Javascript-Konstruktor und Instanziierungsobjekt
  • Detaillierte Erklärung von Prototypen und Prototypenketten in JavaScript
  • Detaillierte Erklärung des this-Pointing-Problems von JavaScript-Prototypobjekten
  • Die Beziehung zwischen JS-Konstruktor und Instanziierung sowie Prototypeinführung

<<:  Diagramm des Bereitstellungs- und Installationsprozesses in der Java+Tomcat-Umgebung

>>:  Zehn nützliche und einfache MySQL-Funktionen

Artikel empfehlen

So fügen Sie einem Feld in MySQL eine Standardzeit hinzu

Unterschiede und Verwendungen von Datumstypen MyS...

Tutorial zur Installation von Ubuntu Server in Vmware

In diesem Artikel finden Sie das grafische Tutori...

Linux: Fünf-Schritte-Kernel-Build-Baum

Inhaltsverzeichnis 0. Der mit dem System geliefer...

Vue implementiert einen einfachen Lupeneffekt

In diesem Artikelbeispiel wird der spezifische Co...

HTML-Maus-CSS-Steuerung

Im Allgemeinen wird die Maus als nach oben gericht...

Lernen Sie die Grundlagen der JavaScript-DOM-Operationen in einem Artikel

DOM-Konzepte DOM: Dokumentobjektmodell: Das Dokum...