添加到数组的对象全部更改为最后添加的对象

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/

Answer 1

请使用克隆：

变化：

_objects.push(_object);

要

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

Answer 2

这是因为您每次都修改同一个对象并将相同的对象添加到Array中。要解决此问题，您可以在每次按下时创建新对象，例如

    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;

选中此Updated Fiddle

Answer 3

这是因为每次需要创建新对象时，您都在更改同一个_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);
});

演示：Fiddle

Answer 4

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

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

只需在_objects.push(coorObj(_object));

中拨打电话即可

这是您更新的Fiddle

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

});