Simple question about clone in javascript

Question

I have a Point

function Point(x, y) {
    this.x = x;
    this.y = y;
};

As you see, it's mutable. So I can change it properties, like

 var p = new Point(2, 3);
 p.x = 6;

I want to add clone method so that expected behavior would be

 var p1 = new Point(2, 3);
 var p2 = p1.clone();
 p1.x = 6;

 assert p1 != p2;     //first assertion. pseudocode.
 assert p2.x == 2;    //second assertion. pseudocode.

For implementing clone() I rewrite Point in next way

function Point(x, y) {
    this.x = x;
    this.y = y;
    this.clone = function () {
        function TrickyConstructor() {
        }
        TrickyConstructor.prototype = this;
        return new TrickyConstructor();
    };
};

But second assertion fails for my implementation. How should I reimplement it?

possible duplicate of How to Deep clone in javascript

Felix Kling
– Felix Kling

2011-07-08 11:07:56 +00:00
Commented Jul 8, 2011 at 11:07 — Felix Kling
– Felix Kling, Commented Jul 8, 2011 at 11:07

Community · Accepted Answer · 2017-05-23 12:19:02Z

4

If the properties are only x and y, I would do this:

function Point(x, y) {
    this.x = x;
    this.y = y;
};

Point.prototype.clone = function() {
    return new Point(this.x, this.y);
}

Note that I attach the clone method to Point.prototype. This is important for the next method to work:

If not, you would have to create a new instance and maybe copy all properties to the new instance:

Point.prototype.clone = function() {
    var clone = new Point(this.x, this.y);
    for(var prop in this) {
        if(this.hasOwnProperty(prop)) {
            clone[prop] = this[prop];
        }
    }
    return clone;
}

but this will not deep copy properties. This only works for primitive values.

If you really want to deep copy properties, this can get much more complex. Luckily, this has already been asked before: How to Deep clone in javascript

Explanation of why your clone method does not work:

The prototype chain of p2 will look like this:

 +-----------+      +-----------+
 |Instance p2|      |Instance p1|
 |           |----->|x=2        |
 |           |      |y=3        |
 +-----------+      +-----------+

so if you set p1.x = 6 it will be:

 +-----------+      +-----------+
 |Instance p2|      |Instance p1|
 |           |----->|x=6        |
 |           |      |y=3        |
 +-----------+      +-----------+

As long as p2 has no own x or y properties, they will always refer to the ones of the prototype which happens to be p1.

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Jul 8, 2011 at 11:02

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stan Kurilin Over a year ago

Thanks, but actually this question about general technique, not just solving this particular issue.

Felix Kling Over a year ago

@StasKurilin: Then this question was already answered: stackoverflow.com/questions/4459928/…

aroth · Accepted Answer · 2011-07-08 11:03:14Z

1

function Point(x, y) {
    this.x = x;
    this.y = y;
    this.clone = function () {
        var newPoint = {};
        for (var key in this) {
            newPoint[key] = this[key];
        }
        return newPoint;
    };
};

Example: http://jsfiddle.net/HPtmk/

answered Jul 8, 2011 at 11:03

aroth

54.9k22 gold badges142 silver badges178 bronze badges

5 Comments

Wolfgang Kuehn Over a year ago

Toss in a if (typeof this[key] == 'function') continue; No need to clone methods.

aroth Over a year ago

@amadeus - It's not cloning the fields, just assigning (and the assignment is necessary in this case, because newPoint does not start as a Point instance). It behaves as a deep-copy in this case because the source object only has two primitive fields. To do a proper deep copy it would need to check for Object and Array types and recurse through them.

Wolfgang Kuehn Over a year ago

You are right. But why would you start from a blank object. Wouldn't that be a waste of space if you had many Points each with many methods? Why can't I insert @aroth at the beginning of the comment?

aroth Over a year ago

@amadeus - Starting from the blank object uses no more space than starting from a Point. The clone method is not copied, just the reference to it. The same exact thing happens if you do new Point(x, y), the new instance gets a copy of the reference to the original definition of clone(). You can see this in the fiddle by testing if p1.clone == p2.clone, as shown here: jsfiddle.net/HPtmk/1

Felix Kling Over a year ago

@amadeus: Regarding the @ see here: meta.stackexchange.com/questions/59445/… (2011-07-01)

Collectives™ on Stack Overflow

Simple question about clone in javascript

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related