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

HTML+CSS+JS zur Implementierung des Spiels „Nicht auf das Whiteboard treten“

Inhaltsverzeichnis Hintergrund 1. Gedankenanalyse...

Detailliertes Tutorial zur Offline-Installation von MySQL unter CentOS7

1. Löschen Sie die ursprüngliche MariaDB, sonst k...

Das Frontend erstellt und ändert CAD-Grafikdetails über JavaScript

Inhaltsverzeichnis 1. Aktuelle Situation 2. CAD-G...

Beispiel für Javascript-Bubblesort

Inhaltsverzeichnis 1. Was ist Bubble Sort 2. Gebe...

Probleme bei der Installation von MySQL 8.0 und beim Zurücksetzen des Kennworts

Mysql 8.0 Installationsprobleme und Passwort-Rese...

Der neueste Linux-Installationsprozess von Tomcat8

Herunterladen https://tomcat.apache.org/download-...

So konfigurieren Sie nginx+php+mysql in Docker

Verstehen Sie zunächst eine Methode: Aufrufen ein...

MySQL-Datenbankgrundlagen: Eine Zusammenfassung der grundlegenden Befehle

Inhaltsverzeichnis 1. Hilfeinformationen nutzen 2...

Detailliertes Installationstutorial für mysql-8.0.11-winx64.zip

Laden Sie das ZIP-Installationspaket herunter: Do...

Unabhängige Implementierung der Nginx-Containerkonfigurationsdatei

Erstellen eines Containers [root@server1 ~]# dock...

Bestimmen Sie anhand von Beispielen, ob das MySQL-Update die Tabelle sperrt

Zwei Fälle: 1. Mit Index 2. Ohne Index Voraussetz...

Eine Zeile CSS-Code zur Integration von Avatar und Nationalflagge

Es ist Nationalfeiertag und jeder kann es kaum er...