Cloning a JavaScript object?

Question

Possible Duplicate:
How to clone js object?

This is another way to create a javascript object (using object literal notation instead of function):

user = {
  name: "Foo",
  email: "bar@baz.com"
}

Is there a way to clone this object or is it a singleton?

Answer 1

Try this:

var clone = (function(){ 
  return function (obj) { Clone.prototype=obj; return new Clone() };
  function Clone(){}
}());

Here's what's going on.

• Clone is a dummy constructor.
• We assign the object we want to clone to the Clone constructor's prototype.
• We call Clone using 'new', so the constructed object has the original object as its constructor's prototype aka (non-standard) __proto__.

The cloned object will share all the properties of the original object without any copies of anything being made. If properties of the cloned object are assigned new values, they won't interfere with the original object. And no tampering of built-ins is required.

Keep in mind that an object property of the newly-created object will refer to the same object as the eponymous property of the cloned object. Assigning a new value to a property of the clone won't interfere with the original, but assigning values to the clone's object properties will.

---

Try this in chrome or firebug console:

var user = {
  name: "Foo",
  email: "bar@baz.com"
}

var clonedUser = clone(user);

console.dir(clonedUser);

---

A detailed explanation of this cloning technique can be found here.

Answer 2

You can use JSON object (present in modern browsers):

var user = {name: "Foo", email: "bar@baz.com" } 
var user2 = JSON.parse(JSON.stringify(user))

user2.name = "Bar";
alert(user.name + " " + user2.name); // Foo Bar

See in jsfiddle.

---

EDIT

If you need this in older browsers, see http://www.json.org/js.html.

Answer 3

I like to use this:

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        var F = function () {};
        F.prototype = o;
    return new F();
    };
}

then any object I want to clone can be done as:

user = {
    name: "Foo",
    email: "bar@baz.com"
};
var user2 = Object.create(user);

As shown in (or similar to) JavaScript The Good Parts

Answer 4

Most of the javascript frameworks have good support for object cloning.

var a= {'key':'value'};
var b= jQuery.extend( true, {}, a );

Answer 5

Object.prototype.clone = function clone(obj) {
                           obj = obj || this;
                           var new_obj  = {};

                           for( var p in obj ) {
                             if ( obj.hasOwnProperty(p) ) {
                               if( obj[p] !== null && typeof(obj[p]) === "object" ) {
                                 new_obj[p] = clone( obj[p] );
                               }
                               else {
                                 new_obj[p] = obj[p];
                               }
                             }
                           }

                           return new_obj;
                         };


/* Example */
var foo = {
     name:  "Foo"
   , email: "bar@baz.com"
   , obj:   {a:"A",b:"B"}
};

var bar   = foo.clone();
bar.name  = "Bar";
bar.obj.b = "C";


// foo and bar should have a different 'name'
// foo and bar should retain the same email
// foo and bar should have different values for <foo/bar>['obj']['b']
// foo and bar should have the same values for <foo/bar>['obj']['a']
console.dir(foo);
console.dir(bar);