Объект, добавленный в массив, все изменяется на последний добавленный объект

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

Спасибо за помощь это было идеальным решением.

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

}); 

Answer 2

Это происходит потому, что вы изменяете один и тот же объект и добавить один и тот же объект в массив каждый раз. Чтобы устранить эту проблему, вы можете создавать новые объекты, каждый раз, когда вниз нажимается, как этот

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

Пожалуйста, используйте клон:

Изменение:

_objects.push(_object); 

Для

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

Answer 5

Вам нужно создать экземпляр нового объекта нажать на к массиву. Есть много способов сделать это, вот один:

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

Просто позвоните, что в вашем _objects.push(coorObj(_object));

Вот ваш обновленный Fiddle