数组中添加的对象都变成了最后一个添加的对象

Question

我只是简单地向数组中添加对象，但它们全部变成了最后添加的值。这看起来非常奇怪。

    var _object = {x:0,y:0,z:0};
    var _objects = [];

    $("div").on("mousedown", function(e) {

        var offset = $(this).offset();

        _object.x = e.pageX-offset.left;
        _object.y = e.pageY-offset.top;

    }).on("mouseup", function(e) {

        var offset = $(this).offset();

        _object.z = 25;
        _objects.push(_object);

    });

这是否是因为它只添加了对象的链接？

http://jsfiddle.net/u5wLn/

- Kivylius

---

在JS中，对象是按引用传递的，因此您正在更新和推送同一对象。 - elclanrs

Answer 1

请使用克隆：

更改：

_objects.push(_object);

To

_objects.push( jQuery.extend(true, {}, _object) );

- Zac

Answer 2

因为您正在更改同一实例的_object并将其推送到数组中，每次需要创建新对象时。

var _object, _objects = [];

$("div").on("mousedown", function (e) {

    var offset = $(this).offset();

    _object.x = e.pageX - offset.left;
    _object.y = e.pageY - offset.top;
    _objects.push(_object);

}).on("mouseup", function (e) {

    var offset = $(this).offset();
    _object.z = 25;
    _objects.push(_object);

}).mouseenter(function () {
    _object = {
        x: 0,
        y: 0,
        z: 0
    };
});

$("button").on("click", function () {
    console.log(_objects);
});

Demo: Fiddle

- Arun P Johny

---

只添加了 z 而不是 x、y、z。 - Kivylius

Answer 3

这是因为您每次修改同一对象，并将同一对象添加到数组中。要解决此问题，您可以每次按下down键时创建新的对象，像这样：

    var offset = $(this).offset();
    _object = {x:0,y:0,z:0};         // We create a new object every time.
    _object.x = e.pageX-offset.left;
    _object.y = e.pageY-offset.top;

请查看更新后的Fiddle

- thefourtheye

Answer 4

你需要实例化一个新对象来推入数组中。有很多方法可以做到这一点，这里是其中之一：

   function coorObj(obj) {
       return {
           x: obj.x,
           y: obj.y,
           z: obj.z
       }
    }

只需在您的_objects.push(coorObj(_object));中调用即可。

这是您更新后的Fiddle。

- monners

Answer 5

感谢您的所有帮助，这真是一个完美的解决方案。

var _object = {x:0,y:0};
var _objects = [];

$("div").on("mousedown", function(e) {

    var offset = $(this).offset();

    _object.x = e.pageX-offset.left;
    _object.y = e.pageY-offset.top;

}).on("mouseup", function(e) {

    var offset = $(this).offset();

    _object.z = 25;
    _objects.push({
        x:_object.x,
        y:_object.y,
        y:25    
    });

});

- Kivylius