我可以擁有兩個具有相同屬性名稱的對象嗎？

Question

每當我嘗試更改數組y中的第一個對象時，數組中的所有其他對象y屬性也會發生更改，是否有任何方法可以防止出現這種情況，或者將多個對象添加到共享相同屬性的數組中？ 我一直在嘗試一切來解決這個問題（我創建了一個遊戲，使用類似的數組爲子彈射擊，每當我改變了我的數組中的第一項的y屬性，數組中的所有其他y屬性隨着它改變）和我認爲這可能是問題所在？

var obj = {x:30,y:20}; 
var arr = []; 
for(var i = 0;i<3;i++) { 
arr.push(obj); 
} 
arr[0].y = 40; 
document.write(arr[0].y + " " + arr[1].y); 

Answer 1

在JavaScript中，對象作爲指向對象內部值的指針存儲在內存中。這是多麼原始數據類型（int，char等）

一個很好的方式展現這是嘗試打印出對象的不同，VS打印出的int：

HTML：

<div id="anelementhere"></div> 
<div id="anotherelementhere"></div> 

JS：

var x = 5; 
var obj = {x:30,y:20}; 
document.getElementById("anelementhere").innerHTML = x; 
document.getElementById("anotherelementhere").innerHTML = obj; 

的jsfiddle：https://jsfiddle.net/d3ohpqqp/

你應該能看到一個類似於：

5 
[object Object] 

現在，知道這一點，什麼是存儲在陣列中沒有{{x:30, y:20}, {x:30, y:20}, {x:30, y:20}}，但{[object Object], [object Object], [object Object]}，這都指向ONE{x:30, y:20}

這是什麼使一個改變之後的所有y性質發生變化。現在，一個簡單的解決方案，正如@IrkenVader所示，是將對象放入數組時初始化的對象。

但是，如果由於某種原因，你還是要在陣列外的原始對象，這是另一種解決方案：

var obj = {x:30,y:20}; 
var arr = []; 
for(var i = 0;i<3;i++) { 
    arr.push({x:obj.x, y:obj.y}); 
} 
arr[0].y = 40; 
document.write(arr[0].y + " " + arr[1].y); 

的jsfiddle：https://jsfiddle.net/9gzyr38x/

Answer 2

您可以通過在.push（）中定義一個對象來解決這個問題。

這產生而不是包含對同一個對象的多個引用的數組中數組的每個元素的新對象。

var arr = []; 
for(var i = 0;i<3;i++) { 
arr.push({x:30, y:20}); 
} 
arr[0].y = 40; 
document.write(arr[0].y + " " + arr[1].y); 

Answer 3

你是你的陣列使得單obj和傳遞引用同一個對象，4倍

相反，你可以嘗試在每次迭代中創建新的對象：

var arr = []; 
for(var i = 0;i<3;i++) { 
    arr.push({x:30,y:20}); 
} 
arr[0].y = 40; 
document.write(arr[0].y + " " + arr[1].y); 

你也可以查找各種方法來「克隆」一個對象。角，jQuery和強調所有提供的方法來做到這一點，或者你可以檢查出How to clone js object?

Answer 4

除了答案@IrkenInvader了，你也可以使用一個對象的jQuery to very easily perform a deep-copy：

var obj = {x: 30, y: 20}; 
var arr = []; 
for(var i = 0; i < 3; i++) { 
    arr.push(jQuery.extend(true, {}, obj)); 
} 

arr[0].y = 40; 
document.write(arr[0].y + " " + arr[1].y);