Javascript Array von Objekten, Objekte, die selbe Member-Array teilen?

Question

Ich habe ein Array von Objekten (dieses Objekt enthält auch ein eigenes Array) Ich bin nicht sicher, warum, aber wenn ich einige Werte auf das Element-Array einer Instanz des Objekts in das Array von Objekten schieben scheint es auch um auf die anderen Element-Arrays auf allen anderen Array von Objekten zu schieben. Ich habe meinen Code unten angegeben:

var ImageGroup = { 
    GroupName:"", 
    haz:[] 
}; 

var ImageHandler = { 
ImageGroupsArray:[], 


image_process: function() { 
//Calling the function here... 

//Pushing the objects 
this.ImageGroupsArray.push(Object.create(ImageGroup)); 
this.ImageGroupsArray.push(Object.create(ImageGroup)); 

//Assigning some values 
this.ImageGroupsArray[0].haz.push("Dog"); 
this.ImageGroupsArray[1].haz.push("Cat"); 

//Should output array with only 'Dog' in it 
console.log(this.ImageGroupsArray[0].haz); 

//Should output array with only 'Cat' in it 
console.log(this.ImageGroupsArray[1].haz); 

//Instead, both of these output ["Dog","Cat"] 
//this.ImageGroupsArray[1].haz and this.ImageGroupsArray[0].haz point to same 'haz' array?? 
} 
} 

Dies geschieht nicht, wenn ich versuche, den Gruppennamen auf die gleiche Weise einzustellen. Was mache ich falsch? Danke für jede Hilfe im Voraus!

Answer 1

Dieser Code:

var ImageGroup = { 
    GroupName:"", 
    haz:[] 
}; 

erstellt ein einzelnes Objekt im Speicher. Dieser Code:

this.ImageGroupsArray.push(Object.create(ImageGroup)); 
this.ImageGroupsArray.push(Object.create(ImageGroup)); 

schafft zwei neue Objekte (jeweils auf den ImageGroupsArray schieben). Beide Objekte haben dasselbe ImageGroup-Objekt wie ihr Prototyp. Nur zu wissen, wie Prototypen funktionieren, wird dir dabei sehr helfen. Aber im Grunde dieser Code:

this.ImageGroupsArray[0].haz.push("Dog"); 
this.ImageGroupsArray[1].haz.push("Cat"); 

sucht die haz Eigenschaft auf jedem dieser Object.create() ed Objekte. Wenn es nicht gefunden werden kann, sucht es die Prototypkette und findet sie auf dem übergeordneten Objekt (das in beiden Fällen dasselbe Objekt ist). Alle Änderungen an diesem einen Objekt werden natürlich an allen Stellen angezeigt, an denen auf dieses Objekt verwiesen wird (also in beiden Objekten, die Sie an ImageGroupsArray verschoben haben).

Der richtige Ansatz ist ImageGroup als Funktion zu erklären, dass seine Eigenschaften definiert:

var ImageGroup = function() { 
    this.GroupName = ''; 
    this.haz = []; 
} 

dann mit dem new Stichwort, statt Object.create():

this.ImageGroupsArray.push(new ImageGroup()); 
this.ImageGroupsArray.push(new ImageGroup()); 

Cheeers.

Answer 2

Sie drücken das gleiche Objekt ImageGroup in ImageGroupArray und so macht es tatsächlich Wirkung in dem gleichen Objekt, das global definiert ist.

Versuchen Sie stattdessen

function getImageGroup() 
{ 
    var imageGroup = new Object(); 
    imageGroup.GroupName = ""; 
    imageGroup.haz = []; 

    return imageGroup; 
} 

this.ImageGroupsArray.push(getImageGroup()); 
this.ImageGroupsArray.push(getImageGroup()); 

Working Fiddle

Answer 3

Es scheint, dass Sie die gleiche ImageGroup Objekt zweimal verweisen. Der ‚Gruppenname‘ Eigenschaft wird überschrieben, aber das Array kann endlos wachsen :-)

Versuchen:

var ImageGroup1 = { GroupName:"foo", haz:[]}; 
var ImageGroup2 = { GroupName:"bar", haz:[]}; 

So können Sie zwei verschiedene Objekte anstelle von zwei Referenzen auf dasselbe Objekt zu erhalten.