关于javascript中克隆的简单问题

Question

我有一个观点

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

，正如你所看到的，它是可变的。所以我可以更改它的属性，就像

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

我想添加克隆方法一样，以便预期的行为是

 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.

为了实现clone()，我用下一种方式重写Point

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

但是第二个断言对于我的实现失败了。我应该如何重新实现它？

Answer 1

如果属性只有 x 和 y，我会这样做：

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

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

请注意，我将 clone 方法附加到 Point.prototype< /代码>。这对于下一个方法的工作非常重要：

如果没有，您将必须创建一个新实例，并且可能将所有属性复制到新实例：

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;
}

但这将不会深度复制属性。这仅适用于原始值。

如果您确实想要深层复制属性，这可能会变得更加复杂。 ，之前已经有人问过这个问题：如何在 javascript 中进行深度克隆

---

幸运的是 为什么你的克隆方法不起作用：

p2的原型链将如下所示：

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

所以如果你设置p1.x = 6它将是：

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

只要p2 没有自己的 x 或 y 属性，它们将始终引用恰好发生的原型的属性是p1。

Answer 2

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;
    };
};

示例： http://jsfiddle.net/HPtmk/