Bei der Programmierung bedeutet Objektmutation, dass der Zustand oder die Daten eines Objekts nach der Erstellung verändert werden. Mit anderen Worten, die Operation, die die Attribute eines Objekts in JavaScript ändert, wird als Objektmutation bezeichnet. Die Objektmutation verändert die Werte eines Objekts direkt, was insbesondere in Anwendungen, in denen mehrere Operationen gleichzeitig auf ein Objekt zugreifen oder es verändern könnten, herausfordernd ist.
Dieser Artikel bietet eine Diskussion über die Objektmutation in JavaScript mit relevanten Codebeispielen, wo immer nötig.
Datentypen in JavaScript
Datentypen geben an, welche Art von Daten eine Variable oder ein Objekt halten kann. JavaScript unterstützt zwei unterschiedliche Kategorien von Datentypen: Primitive und benutzerdefinierte oder Referenztypen.
Primitive Datentypen
In JavaScript sind alle primitiven Datentypen von Natur aus unveränderlich, d.h. sie können nach der Erstellung nicht verändert werden. Zahlen, Booleans, Zeichenketten, Bigints, Undefineds, Nulls, Symbole und Objekte sind Beispiele für primitive Typen.
Benutzerdefinierte oder Referenzdatentypen
Benutzerdefinierte Datentypen oder Referenzdatentypen sind Objekte, die aus primitiven Typen oder einer Kombination aus primitiven und benutzerdefinierten Typen erstellt werden. Typische Beispiele für benutzerdefinierte oder Referenztypen sind Objekte und Arrays.
Wie Variablen in JavaScript zugewiesen und neu zugewiesen werden
Wenn Sie einer Variablen vom primitiven Typ eine andere primitive Typ Variable zuweisen, halten die beiden Variablen ähnliche Werte, aber sie werden an unterschiedlichen Speicherorten gespeichert. Angenommen, Sie haben zwei Variablen varA und varB und weisen einer Variablen auf folgende Weise eine andere zu:
var varA = 100;
var varB = varA;
console.log(varB);
Wenn Sie den vorherigen Code ausführen, wird die Zahl 100 auf der Konsole angezeigt. Jetzt ändern Sie die Werte einer der beiden Variablen (sagen wir varB) wie hier gezeigt.
var varA = 100;
var varB = varA;
varB = 500;
console.log(varA);
Beachten Sie, wie der Wert der Variablen varB auf 500 geändert wurde. Wenn Sie den Wert von varA ausgeben, wird immer noch 100 angezeigt. Dies liegt daran, dass diese Variablen varA und varB an zwei verschiedenen Speicherorten gespeichert sind. Wenn Sie also einen von ihnen ändern, wird der neue oder geänderte Wert nicht auf die anderen Variablen übertragen.
Was ist Objektmutation in JavaScript?
In JavaScript kann der Datentyp eines Objekts zu einer der beiden Kategorien gehören: primitiv oder nicht-primitiv. Während primitive Typen unveränderlich sind, d.h. Sie können sie nach ihrer Erstellung nicht ändern, können nicht-primitive Typen, d.h. Objekte und Arrays, verändert werden. Objekte erlauben immer, dass ihre Werte geändert werden. Daher können Sie den Zustand von Feldern für einen veränderbaren Typ ändern, ohne eine neue Instanz zu erstellen.
Objektmutationen können mehrere Probleme verursachen, wie zum Beispiel:
- Veränderte Objekte können oft zu Wettlaufbedingungen führen, aufgrund von Nebenläufigkeits- und Thread-Sicherheitsproblemen
- Mutation kann Komplexitäten im Quellcode einführen, die aufgrund von Vorhersehbarkeit und Thread-Sicherheitsproblemen entstehen
- Mutation kann oft zu Fehlern führen, die im Quellcode der Anwendung schwer zu identifizieren sind
- Mutation macht das Testen und Debuggen des Codes schwierig, da das Verfolgen von Code, der Mutation nutzt, eine Herausforderung darstellt
Codebeispiele, die Objektmutation demonstrieren
Objektmutation kann in einem der folgenden Szenarien auftreten:
- Hinzufügen, Bearbeiten oder Entfernen von Eigenschaften
- Verwendung von Methoden, die Mutation aufweisen können
Wenn Sie die Eigenschaften eines Objekts, entweder direkt oder indirekt, ändern, mutieren Sie im Grunde genommen das Objekt. Der folgende Codeausschnitt zeigt, wie Sie ein Objekt durch Ändern seiner Eigenschaft mutieren können.
const author = { id: 1, name: "Joydip Kanjilal"};
author.id = 2; author.city = "Hyderabad, INDIA";
console.log(author);
Im vorhergehenden Codeabschnitt erstellen wir ein Objekt namens author, das zwei Eigenschaften enthält, nämlich id und name. Während die id-Eigenschaft verwendet wird, um die id des Autoreneintrags zu speichern, speichert die name-Eigenschaft den Namen des Autors. Beachten Sie, wie wir das Autor-Objekt mutieren, indem wir den Wert der id-Eigenschaft ändern. Als Nächstes fügen wir eine neue Eigenschaft namens city zum Autor-Objekt hinzu und weisen der Eigenschaft einen Wert zu.
Wenn Sie den vorhergehenden Codeabschnitt ausführen, werden die Eigenschaften und deren Werte des Autor-Objekts wie unten dargestellt angezeigt:
{ name: 'Joydip Kanjilal', city: 'Hyderabad, INDIA' }
Wenn Sie in JavaScript ein Objekt an eine Funktion übergeben oder einer Variablen zuweisen, übergeben Sie im Wesentlichen die Referenz auf das Objekt und nicht eine Kopie davon. Dies bedeutet, dass Änderungen, die Sie am neuen Objekt vornehmen, das durch Übergeben eines Objekts oder Zuweisen an die Variable erstellt wurde, auf alle Verweise des tatsächlichen Objekts angewendet werden.
Betrachten Sie das folgende Code-Stück, das zeigt, wie Sie ein Objekt in JavaScript erstellen und es dann einer Variablen zuweisen können.
const objA = { id: 1, name: 'Joydip Kanjilal',
city: 'Hyderabad, INDIA', pincode: 500089 }
const objB = objA;
objB.pincode = 500034;
console.log(objA);
Im vorherigen Code-Stück wird das Objekt objA an objB zugewiesen und der Wert der Eigenschaft pincode von objA geändert, d.h., das Objekt objA wird verändert. Wenn Sie das Programm ausführen, werden die folgenden Daten angezeigt.
{ id: 1, name: 'Joydip Kanjilal', city: 'Hyderabad, INDIA', pincode: 500034 }
Beachten Sie, dass der Wert der pincode-Eigenschaft geändert wurde.
Verhindern von Objektmutationen in JavaScript
In JavaScript können Sie Mutationen auf verschiedene Arten verhindern, wie z.B. folgende:
- Die Verwendung von Objektklonung unter Verwendung der Methode
Object.assign()oder des Spread-Operators (…) - Die Verwendung der Methode
Object.seal()zur Verhinderung des Hinzufügens oder Löschens von Eigenschaften eines Objekts - Die Verwendung der Methode
Object.freeze()zur Verhinderung des Hinzufügens, Bearbeitens oder Löschens von Eigenschaften eines Objekts
Die Verwendung von Klonen
Sehen Sie sich das folgende Code-Stück an, das zeigt, wie Sie ein Objekt in JavaScript mithilfe des Spread-Operators klonen können.
let originalObj = { x: 10, y: 100 }; let clonedObj = { originalObj };
Hier ist der Name des geklonten Objekts clonedObj, und es ist identisch mit dem Originalobjekt namens originalObj. Wenn Sie also die Werte der beiden Eigenschaften dieser beiden Objekte anzeigen, werden die Ergebnisse gleich sein.
Ändern Sie nun den Wert einer der Eigenschaften des geklonten Objekts mit dem Namen clonedObj in den gewünschten Wert, wie im untenstehenden Code-Stück gezeigt.
clonedObj.x = 50;
Schreiben Sie nun das folgende Code-Stück, um den Wert der Eigenschaft mit dem Namen x der beiden Objekte originalObj und clonedObj anzuzeigen.
console.log(originalObj.x);
console.log(clonedObj.x);
Wenn Sie das Programm ausführen, werden Sie feststellen, dass der Wert der Eigenschaft x im Originalobjekt unverändert ist. Die Werte werden wie folgt auf der Konsole angezeigt:
10
50
Verwendung der Object.freeze() Methode
Die Methode Object.freeze() kann ein Objekt unveränderlich machen, indem sie Änderungen an seinen Eigenschaften verhindert.
const author = { id: 1, name: "Joydip Kanjilal",
city: "Hyderabad", state: "Telengana",
country: "India", pincode: 500089};
Object.freeze(author);
author.city = "Bangalore";
author.state = "Karnataka";
author.pincode = 560010;
console.log(author);
Wenn Sie das vorherige Code-Stück ausführen, werden die Ergebnisse ähnlich wie folgt sein:
{
id: 1,
name: 'Joydip Kanjilal',
city: 'Hyderabad',
state: 'Telangana',
country: 'India',
pincode: 500089
}
Wie aus der Ausgabe ersichtlich ist, auch wenn Sie Werte den Eigenschaften city und state und pincode zugewiesen haben, gibt es keine Auswirkung. Es wurden also keine Änderungen an den Daten in einer der Eigenschaften des Objekts vorgenommen.
Verwendung der Object.seal() Methode
Sie können auch die Methode Object.seal() verwenden, um die Objektmutation in JavaScript zu verhindern. Diese Methode würde es Ihnen ermöglichen, die Werte der vorhandenen Eigenschaften zu ändern, aber Sie können keine der Eigenschaften des Objekts ändern oder löschen. Das folgende Code-Beispiel veranschaulicht dies:
const author = { id: 1, name: "Joydip Kanjilal",
city: "Hyderabad", state: "Telangana",
country: "India", pincode: 500089};
Object.seal(author);
author.city = "Bangalore";
author.state = "Karnataka";
author.pincode = 560005;
author.booksauthored = 3;
console.log(author);
Im vorherigen Code-Snippet werden Änderungen an den Eigenschaften des Objekts mit dem Namen Autor zugelassen, jedoch weder das Hinzufügen noch das Löschen von Eigenschaften des Objekts. Wenn Sie das Programm ausführen, werden Sie feststellen, dass die Werte der geänderten Eigenschaften im Ergebnis reflektiert werden, jedoch die Anweisungen zum Hinzufügen oder Löschen von Eigenschaften ignoriert werden. So würde die Ausgabe in der Konsole aussehen:
{
id: 1,
name: 'Joydip Kanjilal',
city: 'Bangalore',
state: 'Karnataka',
country: 'India',
pincode: 560005
}
Verwendung der Methode Object.defineProperty()
Sie können auch die Methode Object.defineProperty() in JavaScript nutzen, um die Veränderlichkeit der einzelnen Eigenschaften eines Objekts zu steuern. Der folgende Code-Ausschnitt zeigt, wie Sie diese Methode verwenden können, um Änderungen am Wert einer Eigenschaft zu verhindern, dessen Veränderlichkeit eingeschränkt ist.
const author = { id: 1, name: "Joydip Kanjilal"};
Object.defineProperty(author, "booksauthored",
{
value: 3,
writable: false,
});
author.booksauthored = 5;
console.log(author.booksauthored);
Wenn Sie den vorherigen Code-Ausschnitt ausführen, wird die Zahl 3 in der Konsole angezeigt.
Wichtige Erkenntnisse
- JavaScript kategorisiert Objekttypen in zwei verschiedene Kategorien: primitive (veränderliche) und Objekte (unveränderliche).
- Der Begriff Objektmutation bezieht sich auf die Operationen, die ein Objekt verändern oder ändern, nachdem es erstellt wurde.
- Während primitive Werte wie Zahlen usw. nicht verändert werden können, können Objekte nach ihrer Erstellung geändert werden.
- Da Zeichenfolgen in JavaScript unveränderlich sind, können sie nicht verändert werden, nachdem sie erstellt wurden.
- Obwohl die Mutation an sich nicht so schlimm ist, sollten Sie sie sorgfältig verwalten, um Fehler in Ihren Anwendungen zu reduzieren.
- Sie können die Mutation in JavaScript reduzieren oder eliminieren, indem Sie bewährte Praktiken befolgen und auf unveränderliche Datenstrukturen zurückgreifen.
Source:
https://dzone.com/articles/an-introduction-to-object-mutation-in-javascript