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

js zur Realisierung eines Web-Musikplayers

Dieser Artikel enthält einfachen HTML- und Musikp...

Docker verpackt das lokale Image und stellt es auf anderen Maschinen wieder her

1. Verwenden Sie Docker-Images, um alle Image-Dat...

Definition und Funktion des zoom:1-Attributs in CSS

Heute wurde ich gefragt, wozu das Zoom-Attribut i...

So bereinigen Sie schnell Milliarden von Daten in einer MySQL-Datenbank

Heute habe ich eine Festplattenalarm-Ausnahme erh...

JS realisiert Spezialeffekte der Webseiten-Navigationsleiste

In diesem Artikel erfahren Sie mehr über einen pr...

Detaillierte Erläuterung der logischen Architektur von MySQL

1. Gesamtarchitekturdiagramm Im Vergleich zu ande...

Installieren Sie Python 3.6 unter Linux und vermeiden Sie Fallstricke

Installation von Python 3 1. Abhängige Umgebung i...

Sehen Sie sich den Befehl zum Ändern der MySQL-Tabellenstruktur an

Kurzbeschreibung Der Editor hat häufig Probleme m...

Die Verwendung von Textbereichen in HTML und häufige Probleme und Fallanalyse

Der Textarea-Tag ist ein HTML-Tag, den wir häufig ...

So importieren Sie Tomcat-Quellcode in Idea

Inhaltsverzeichnis 1. Laden Sie den Tomcat-Code h...

Detaillierte Erklärung der CSS-Hintergrund- und Rahmen-Tag-Beispiele

1. CSS-Hintergrund-Tag 1. Stellen Sie die Hinterg...