Exactly clone an object in javascript

Question

I tried to exactly clone an object in javascript. I know the following solution using jquery:

var newObject = jQuery.extend({}, oldObject);
// Or
var newObject = jQuery.extend(true, {}, oldObject);

but the problem with that is, that the objects type gets lost:

var MyClass = function(param1, param2) {
    alert(param1.a + param2.a);
};
var myObj = new MyClass({a: 1},{a: 2});
var myObjClone = jQuery.extend(true, {}, myObj);
alert(myObj instanceof MyClass);      // => true
alert(myObjClone instanceof MyClass); // => false

Is there any solution to get true on the second alert?

Answer 1

jQuery.extend is not expecting you to use the instanceof operator. It is doing a gloriously complicated copy, and not a true clone. Looping through the elements is not enough. Also, calling the constructor isn't best cause you'll loose your arguments. Try this:

var MyClass = function(param1, param2) {
    alert(param1.a + param2.a);
    this.p1 = param1;
    this.p2 = param2;
};

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

var myObj = new MyClass({a: 1},{a: 2});
var myObjClone = clone(myObj);
alert(myObj instanceof MyClass);      // => true
alert(myObjClone instanceof MyClass); // => true
console.log(myObj);       //note they are
console.log(myObjClone)   //exactly the same

Be aware that since your prototype now points back to the origional (myObj), any changes to myObj will reflect in myObjClone. Javascript's prototypal inheritance is kinda tricky. You need to be sure that your new object has the correct prototype, and hence the correct constructor.

Admitadly, Javascript makes my head hurt. Still, I think I'm reading this right, from the ECMAScript language spec:

13.2.2 [[Construct]]
When the [[Construct]] internal method for a Function object F is called with a possibly empty list of arguments, the following steps are taken:

1. Let obj be a newly created native ECMAScript object.
2. Set all the internal methods of obj as specified in 8.12.
3. Set the [[Class]] internal property of obj to "Object".
4. Set the [[Extensible]] internal property of obj to true.
5. Let proto be the value of calling the [[Get]] internal property of F with argument >"prototype".
6. If Type(proto) is Object, set the [[Prototype]] internal property of obj to proto.
7. If Type(proto) is not Object, set the [[Prototype]] internal property of obj to the >standard built-in Object prototype object as described in 15.2.4.
8. Let result be the result of calling the [[Call]] internal property of F, providing >obj as the this value and providing the argument list passed into [[Construct]] as args.
9. If Type(result) is Object then return result.
10. Return obj.

This person seems to understand the concept much better than I do. K, I'm going back to java now where I swim more than I sink :) .