JavaScript литерала объекта и массив

Question

У меня есть следующий код JavaScript:

oCoord = {x: null, y: null}; 
var aStack = []; 

oCoord.x = 726; 
oCoord.y = 52; 
aStack.push(oCoord); 

oCoord.x = 76; 
oCoord.y = 532; 
aStack.push(oCoord); 

oCoord.x = 716; 
oCoord.y = 529; 
aStack.push(oCoord); 

Теперь это создает следующую структуру (массив из трех объектов).

Array[Object, Object, Object]; 

Однако, когда я пытаюсь получить доступ к свойствам каждого объекта, все они выглядят одинаково. Почему это?

alert(aStack[0].x); // Outputs 716 
alert(aStack[1].x); // Outputs 716 
alert(aStack[2].x); // Outputs 716 

Что я делаю неправильно?

Answer 1

Вы используете тот же oCoord для всех ваших объектов координат.

Попробуйте вместо этого:

var aStack = []; 
aStack.push({ x: 726, y: 52}); 
aStack.push({ x: 532, y: 76}); 
aStack.push({ x: 716, y: 529}); 

Answer 2

Вы используете такую ​​же ссылку на ваш объект. Вам нужно каждый раз создавать новый.

E.g.

var aStack = []; 

aStack.push({ x: 2, y: 23 }); 
aStack.push({ x: 3, y: 4 }); 
aStack.push({ x: 33, y: 2 }); 

Или, если вы предпочитаете стиль, который вы написали его, сделайте следующее:

var aStack = []; 

var o = {}; 
o.x=1; 
o.y=3; 
aStack.push(o); 

var o = {}; 
o.x=21; 
o.y=32; 
aStack.push(o); 

var o = {}; 
o.x=14; 
o.y=43; 
aStack.push(o); 


alert(aStack[0].x); 
alert(aStack[1].x); 
alert(aStack[2].x); 

Примечание мы вновь объявляя с var каждый раз, чтобы создать новый экземпляр.

Answer 3

var aStack = []; 
aStack.push({ x: 726; y: 52 }); 
aStack.push({ x: 76; y: 532 }); 
aStack.push({ x: 716; y: 529 }); 

Answer 4

Вы перезапись значения х и у в oCord.

Так что, когда вы говорите

oCoord.x = 716; 
oCoord.y = 529; 

перезаписывает предыдущее значение.

Answer 5

Egil Hansen's answer, вероятно, лучше, но вы могли бы clone the object в качестве альтернативного решения:

// Some function to clone objects (e.g. using jQuery) 
function clone(o) { return $.extend(true, {}, o); } 

oCoord = { x: null, y: null }; 
var aStack = []; 

oCoord.x = 726; 
oCoord.y = 52; 
aStack.push(clone(oCoord)); 

oCoord.x = 76; 
oCoord.y = 532; 
aStack.push(clone(oCoord)); 

oCoord.x = 716; 
oCoord.y = 529; 
aStack.push(clone(oCoord)); 

// console.log(aStack) => 
// [Object x=726 y=52, Object x=76 y=532, Object x=716 y=529]