smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

JavaScript: 3 Ansätze ein Objekt zu klonen (kopieren)

3. Juni 2013
Stephan
JavaScript: 3 Ansätze ein Objekt zu klonen/kopieren

In JavaScript sorgt die mehrfache Variablenzuweisung von Objekten oder Übergabe von Objekten an Funktionen oft für Verwirrung. Im Gegensatz zu einfachen Datentypen, wie z.B. Strings und Integers, wird nicht der entsprechende Wert sondern eine Referenz gespeichert bzw. übergeben.

Übergibt man z.B. ein Objekt an eine Funktion und nimmt innerhalb der Funktion Änderungen am Objekt vor, so sind diese Änderungen auch außerhalb der Funktion „sichtbar“.

Manchmal kann das jedoch ungewünschte Nebeneffekte haben, weshalb man nicht mit der Referenz sondern mit einer Kopie bzw. einem Klon des Objekts arbeiten möchte, um das Originalobjekt nicht zu verändern.

Aus diesem Grund zeige ich euch in diesem Artikel 3 Ansätze, mit den ihr in JavaScript ein Objekt klonen bzw. kopieren könnt.

Problem: Referenz

Diejenigen von euch, die nicht genau verstehen was ich eigentlich meine, sollten sich den Folgenden Code mal anschauen:

var obj1 = 
{
    name: 'Hans'
};
var obj2 = obj1;
	
obj2.name = 'Dennis';
	
// Ausgabe: 'Dennis - Dennis'
console.log(obj1.name + ' - ' + obj2.name);

Wie ihr seht, haben wir Objekt obj1 mit einer Eigenschaft namens name erstellt. Jetzt würden wir gerne dieses Objekt einer neuen Variable namens obj2 zuweisen und anschließend den Namen ändern. Aber anstatt, dass wir nun zwei Objekte mit zwei verschiedenen Namen haben, haben wir nur ein Objekt. Aus diesem Grund ist der name von obj2 als auch obj1 nun mit Dennis belegt.

1. Ansatz

Eine Möglichkeit eine Kopie eines Objekts zu erstellen, ist der Einsatz von jQuery und der bereitgestellten extend-Funktion:

var obj2 = $.extend({}, obj);

obj2.name = 'Dennis'

// Ausgabe: 'Hans - Dennis'
console.log(obj1.name + ' - ' + obj2.name);

Jetzt haben wir endlich zwei verschiedene Objekte, wie die Ausgabe bestätigt.

2. Ansatz

Ein native Möglichkeit, also ohne Einsatz von jQuery, besteht darin, ein Objekt in einen String umzuwandeln und dann wieder zurück in ein Objekt. Dazu nutzen wir die entsprechenden Funktionen des JSON-Objekts:

var obj2 = JSON.parse(JSON.stringify(obj))

obj2.name = 'Dennis'

// Ausgabe: 'Hans - Dennis'
console.log(obj1.name + ' - ' + obj2.name);

3. Ansatz

Der 3. Ansatz, welcher auch ohne den Einsatz von jQuery auskommt, basiert auf der Verwendung der create-Funktion von Object:

var obj2 = Object.create(obj);

obj2.name = 'Dennis'

// Ausgabe: 'Hans - Dennis'
console.log(obj1.name + ' - ' + obj2.name);

Fazit

Um ein Objekt in JavaScript zu kopieren bzw. zu klonen, gibt es wie fast immer in JavaScript mehrere Möglichkeiten. Nebst den 3 Ansätzen, die ich in diesem Artikel vorgestellt habe, gibt es noch weitere, jedoch sind die hier vorgestellten die (denke ich) performantesten Varianten.

Ich selbst bevorzuge z.B. den 3. Ansatz, weil ich dann zum einen nicht notwendigerweise jQuery benötige. Zum anderen finde ich sieht es nicht so „dirty“ aus wie der 2. Ansatz.

Welchen Ansatz bevorzugt ihr? Kennt ihr weitere Wege ein JavaScript-Objekt zu kopieren?

Kommentare  
2 Kommentare vorhanden
1 Dennis schrieb am 9. Dezember 2014 um 15:07 Uhr

Am einfachsten (mit jQuery) funktioniert’s mit der clone Funktion:

var obj2 = $(obj1).clone();

2 Veli Senol schrieb am 29. Januar 2016 um 22:51 Uhr

Hallo Stephan,

du hast einen kleinen Fehler bei Ansatz 1-3 jeweils in der ersten Zeile (obj statt obj1).

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!