 gits  5,390
Expert Mod 4TB
This short article introduces a method that may be used to create a 'deep-copy' of an javascript object. You might ask: 'Wherefore do we need this?' ... Answer: 'Only variable-values of the basic data-types string, int, float, boolean and to make the confusion perfect :) functions too! are passed by value, all others are passed by reference.' This means, when you create an object a, like in the code below, and you assign object a to variable b then you will pass the object a by reference. That results in the fact, that when you assign a new value to b.foobar, a.foobar will be changed accordingly. To pass it by value, what you can imagine as a (deep-)copy of object a, we have to use a function that recursivly copies the values of any datastructure inside of object a to object b. -
// example object that might be cloned
-
var a = {
-
foo : { test: 1, test1: 2 },
-
bar : function(a) { alert(a) },
-
foobar: 'foobar1',
-
arr : [1, [8, 9], {1: 1, 2: 2}, 4]
-
};
-
-
/**
-
* function clone_obj deep-clones an js-object
-
*
-
* @param obj javascript-object
-
* @return c cloned javascript-object
-
*/
-
function clone_obj(obj) {
-
if (typeof obj !== 'object' || obj == null) {
-
return obj;
-
}
-
-
var c = obj instanceof Array ? [] : {};
-
-
for (var i in obj) {
-
var prop = obj[i];
-
-
if (typeof prop == 'object') {
-
if (prop instanceof Array) {
-
c[i] = [];
-
-
for (var j = 0; j < prop.length; j++) {
-
if (typeof prop[j] != 'object') {
-
c[i].push(prop[j]);
-
} else {
-
c[i].push(clone_obj(prop[j]));
-
}
-
}
-
} else {
-
c[i] = clone_obj(prop);
-
}
-
} else {
-
c[i] = prop;
-
}
-
}
-
-
return c;
-
}
-
-
// usage: we clone object a to object b
-
var b = clone_obj(a);
-
Note: Why can't we copy dom-nodes with that function? Answer: dom-nodes contain references to its parent- and child-objects etc. When copying this with the above method we will get an error: 'too much recursion' ... because when copying a parent object we come to a child of that and from there to its parent and so on ... for cloning dom-nodes we simply may use the cloneNode() dom-method.
testers needed ;) ... i think it works the way it should ... but may be I've overlooked something?
testing-help: when testing in firebug console the test scenario could be for example: - var a = {
-
foo : { test: 1, test1: 2 },
-
bar : function(a) { alert(a) },
-
foobar: 'foobar1',
-
arr : [1, [8, 9], {1: 1, 2: 2}, 4]
-
};
-
-
var c = a;
-
c.foobar = 'new test';
-
-
function clone_obj(obj) {
-
if (typeof obj !== 'object' || obj == null) {
-
return obj;
-
}
-
-
var c = obj instanceof Array ? [] : {};
-
-
for (var i in obj) {
-
var prop = obj[i];
-
-
if (typeof prop == 'object') {
-
if (prop instanceof Array) {
-
c[i] = [];
-
-
for (var j = 0; j < prop.length; j++) {
-
if (typeof prop[j] != 'object') {
-
c[i].push(prop[j]);
-
} else {
-
c[i].push(clone_obj(prop[j]));
-
}
-
}
-
} else {
-
c[i] = clone_obj(prop);
-
}
-
} else {
-
c[i] = prop;
-
}
-
}
-
-
return c;
-
}
-
-
var b = clone_obj(a);
-
b.foobar = 'test';
-
b.bar = function(a) { alert(a + a) };
-
-
console.info(a.toSource());
-
console.info(b.toSource());
-
9 13270 
the sub-loops are unnecessary. clone_obj() takes care of the data types itself - function clone_obj(obj) {
-
if (typeof obj !== 'object' || obj === null) {
-
return obj;
-
}
-
-
var c = obj instanceof Array ? [] : {};
-
-
for (var i in obj) {
-
if (obj.hasOwnProperty(i)) {
-
c[i] = clone_obj(obj[i]);
-
}
-
}
-
-
return c;
-
}
gits 5,390
Expert Mod 4TB
seems reasonable and the method looks much better now :) ... thanks ... it was a kind of one step after another method before and now it seems quite well refactored to a ready one :)
kind regards,
gits
the remaining problems of the functions I see:
- besides the literals, there are only Object and Array supported as type (thus Boolean, String, Number, RegExp, Error, etc. will be cloned as Object)
- custom prototypes are cloned as well
- custom "classes" are cloned as Object
gits 5,390
Expert Mod 4TB
but that should be sufficient ... since only arrays and objects needs to be recursivly forced to be 'copied' by value ... the outcome should only be a 'deep-copy' of the original object?
I understand that Boolean, String and Number objects can be passed as literal, but the others would just loose their built-in methods. and a custom object would be copied with all its methods and loses its constructor, quite some overhead, if you ask me. - function Foo()
-
{
-
this.bar = new Boolean(1);
-
}
-
-
Foo.prototype.foobar = function (x) { alert(x); };
-
-
var x = new Foo();
-
var y = clone_obj(x);
-
console.info(y instanceof Foo); // false
-
y.foobar(2); // foobar() is not a function
-
preserves the object constructor (and doesn’t clone DOM objects) - function clone_obj(obj)
-
{
-
if (typeof obj !== 'object' || obj === null) {
-
return obj;
-
}
-
if (obj instanceof Node || obj instanceof NodeList || obj instanceof NamedNodeMap) {
-
return obj;
-
}
-
-
var a = obj.valueOf ? obj.valueOf() : undefined;
-
var c = new window[obj.constructor.name](a);
-
-
for (var i in obj) {
-
if (obj.hasOwnProperty(i)) {
-
c[i] = clone_obj(obj[i]);
-
}
-
}
-
-
return c;
-
}
gits 5,390
Expert Mod 4TB
didn't find time yet to have a closer look ... but the prototype must be copied ... since i would expect that when cloning an object (with the orig function it does - in your above test foobar wasn't copied) -> so i would say that obj.hasOwnProperty(i) could have been removed before cloning a property ... the constructor is an issue and should be fixed ... in case you would need to ask that question anytime ... :) ... the new operation would create a new obj instance and then the above condition should be back in there :) ... but i just suspect that using obj.constructor.name isn't cross browser safe ... since i think there is a problem in IE with that?
IMO, as long as you have the correct constructor, there is no need to copy the prototype at all, or on the other hand side, copy the prototype itself, which should lift off much of the recursion (would that be the way to go for extended objects?).
and another obstacle are closures–sometimes I use them to create immutable properties–and private variables. I don’t know, whether they can be copied at all.
yea, I don’t like the obj.constructor.name that much either, but what else is there to do? (can’t tell anything about IE, due to a lack of it)
found some clone code … don’t know how good it is (yet) - function clone(obj) {
-
function Constructor(){}
-
Constructor.prototype = obj;
-
return new Constructor();
-
}
[edit]not very good …[/edit]
Sign in to post your reply or Sign up for a free account.
Similar topics
by: sonic |
last post by:
Hello,
I am cloning a table row which contains images that have behaviors
attached to them as well as onclick events.
The problem is that the cloned row seems to be executing the...
|
by: Hendrik Schober |
last post by:
Hi,
I need something like this:
class X {
private:
struct Impl_ {
virtual ~Impl_() {}
virtual Impl_* clone() const = 0;
};
|
by: AVL |
last post by:
Hi,
I've a query in cloning. How cloning is different from creating a new
instance of an object.? I suppose cloning also creates a new object and
copies the exisitng object's data. Where and when...
|
by: Neven Klofutar |
last post by:
Hi,
Can please someone send me a link or an example of deep cloning.
thanx, Neven
|
by: BenW |
last post by:
Hello,
What is the easiest way to make "deep copy" of my Hashtable?
How about with other Collection classes in C#, any documents available?
I don'r actually understand why Framework's...
|
by: Steven Blair |
last post by:
I need to perform a Deep Copy on an ArrayList.
I wrote a small sample app to prove this could be done:
ArrayList a = new ArrayList();
ArrayList b = new ArrayList();
a.Add("Hello");
b =...
|
by: raylopez99 |
last post by:
The "C# Cookbook" (O'Reilly / Jay Hilyard), section 3.26, is on deep
cloning versus shallow cloning. The scanned pages of this book are
found here: http://www.sendspace.com/file/mjyocg (Word...
|
by: Dan Dorey |
last post by:
I've implemented the ICloneable interface on one of my class. I've
written this simple code in two different ways and I think both should
work but it's not the case and I'm curious to understand...
|
by: scf1984 |
last post by:
How does one perform a deep clone (by value, not by reference) to an object in JavaScript?
|
by: gasfusion |
last post by:
Hey guys. I have a little problem trying to clone my object, which is shown below. If you notice below, i am using a generic linked list structure to store byte arrays. The problem is when i use my...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |
