JavaScript: How to make a copy of a object? [duplicate]

Question

This question already has answers here:

What is the most efficient way to deep clone an object in JavaScript? (67 answers)

Cloning the object in JavaScript [duplicate] (3 answers)

Closed 8 years ago.

I am trying to create a copy of object a, without having to manually enter its property's into object b. In this code, b simply refers to a. I want to create a new version of a, so that when I add a property to b, it is not visible through a.

var a = new Object(); // create an empty object
var b = a;             // now b refers to the same object
b.test = 1;            // add a new property to b
alert(a.test);         // => 1: the new property is also visible through a
a === b;               // => true: a and b refer to the same object

Answer 1

You have to be careful when working with Javascript objects and the equals (=) operator. This operator does not create a copy of the object, but only assigns a reference to the original internal object.

That means that in your case, b does not store the value(s) of a, but after calling

var b = a;

both a and b point to the same object in memory! Therefore, changing any properties of b also changes them for a (again: they're the same object internally).

To create a copy of an object you have to manually copy every property of it:

var a = {};  // create an empty object
a.prop1 = 1; // set a property of this object
var b = {};  // create another empty object
b.prop1 = a.prop1; // copy all properties (in this case: only one) of a to b
b.test = 1;  // add a new property to b
alert(a.test); // => undefined, as .test is only defined for b
a === b; // => false, as a and b are different objects.

An elegant solution to the problem of cloning JS-objects can be found here: How do I correctly clone a JavaScript object?

Answer 2

In plain JavaScript you could do:

var copy = JSON.parse(JSON.stringify(myObj));

See: http://jsfiddle.net/kukiwon/AyKdL/

Answer 3

How about using deep copy pattern like below. This is from "Javascript Patterns" of Stoyan Stefanov.

function extendDeep(parent, child) {
    var i,
        toStr = Object.prototype.toString,
        astr = "[object Array]";

    child = child || {};

    for (i in parent) {
        if (parent.hasOwnProperty(i)) {
            if (typeof parent[i] === "object") {
                child[i] = (toStr.call(parent[i]) === astr) ? [] : {};
                extendDeep(parent[i], child[i]);
            } else {
                child[i] = parent[i];
            }
        }
    }
    return child;
}

Answer 4

In your example, "a" is just a function object and you are just creating additional pointers.

Just create a new instance of them

var a1 = new a();
var b1 = new a();
a1.test = 1;
b1.test = 2;

a1 != b1

The advantage to using a function as a Class is the utilize object.prototype, inheritance and instance checking. If you want just a data store then just change it to a generic object

var a = {};
var b = {};
a.test = 1;
b.test = 2;

"JavaScript the Good Parts" is an absolute must

http://www.youtube.com/watch?v=hQVTIJBZook

http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742