javascript - 改变一个对象的属性也会影响另一个对象

Question

问题：当我改变points一个多边形的poly2时候，它也改变了points另一个多边形的poly！

为什么改变一个也会改变另一个，我们如何将它们解耦？

console.log(poly.getPoints()[1].x);  // 100

// Make a change to `poly2`
poly2.setPoints(poly.getPoints());
poly2.getPoints()[1].x=200

console.log(poly.getPoints()[1].x);  // 200 (both poly and poly2 are affected!)

jsfiddle：http: //jsfiddle.net/8hFyv/

Answer 1

poly2.setPoints(poly.getPoints());

这是你的问题。点数组是同一个对象。

由于您的数组中有数组，因此该slice(0)技巧不起作用，您需要深拷贝。

幸运的是，您使用的是 jQuery，它有一个方法可以做到这一点。

将上面的行替换为：

poly2.setPoints($.extend(true, [], poly.getPoints()));

Answer 2

执行此操作时，您的 poly 和 poly2 对象引用相同的点数组：

poly2.setPoints(poly.getPoints());

将其更改为：

poly2.setPoints([0, 0, 100, 0, 100, 100, 0, 100]);

Answer 3

要克隆这些点，而不是在多边形之间共享它们，您需要自己为每个点创建新对象。

你可以这样做map：

poly2.setPoints(poly.getPoints().map(function (p) {
    return { x: p.x, y: p.y };
}));

或者，使用jQuery.map：

poly2.setPoints($.map(poly.getPoints(), function (p) {
    return { x: p.x, y: p.y };
}));

Answer 4

其他答案在评估问题时是正确的，但还有另一种方法可以解决它：设置点数组时“克隆”它。换句话说：

poly2.setPoints(poly.getPoints().slice());

如果由于某种原因getPoints()返回数组以外的东西，您将需要一种不同的克隆方法（例如 axel.michel 建议的方法），但因为我认为它应该对您有用。

Answer 5

问题是，poly.getPoints 是一组动力学指针对象，要摆脱它，请尝试以下操作：

poly2.setPoints(JSON.parse(JSON.stringify(poly.getPoints())));