オブジェクトのJavascript配列、同じメンバ配列を共有するオブジェクト？

Question

私はオブジェクトの配列を持っている（このオブジェクトはまた、それ自身の配列が含まれています）私はなぜわからないんだけど、私はオブジェクトの配列内のオブジェクトの1つのインスタンスのメンバーアレイ上にいくつかの値を押すと、それはまたようです他のすべてのオブジェクト配列上の他のメンバ配列にプッシュします。私は以下のコードを提供しています：

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?? 
} 
} 

同じようにGroupNameを設定しようとすると、これは起こりません。私は間違って何をしていますか？事前に助けてくれてありがとう！

Answer 1

このコード：

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

がメモリ内の単一のオブジェクトを作成します。このコード：

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

は、2つの新しいオブジェクトを作成します（それぞれをImageGroupsArrayにプッシュします）。 これらのオブジェクトはどちらも、プロトタイプと同じImageGroupオブジェクトを持っています。プロトタイプがどのように機能するかを知るだけで、これに多くの助けになります。しかし、基本的には、このコード：

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

は、それらのObject.create()編オブジェクトのそれぞれにhazプロパティを探します。見つからない場合は、プロトタイプチェーンを検索し、親オブジェクト（どちらの場合も同じオブジェクト）上で見つけます。このオブジェクトに加えられた変更は、もちろん、このオブジェクトが参照されているすべての場所に表示されます（したがって、両方ともImageGroupsArrayにプッシュしたオブジェクト）。

正しいアプローチは、そのプロパティを定義する関数としてImageGroupを宣言することである。

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

Cheeers：

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

は、代わりにObject.create()のnewキーワードを使用します。

Answer 2

同じオブジェクトImageGroupをImageGroupArrayにプッシュしているため、実際にはグローバルに定義された同じオブジェクトに効果があります。

は、あなたが二度同じImageGroupオブジェクトを参照しているようだ

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

    return imageGroup; 
} 

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

Working Fiddle

Answer 3

代わりにこれを試してみてください。 は「グループ名」プロパティは上書きされますが、配列は

てみてください:-)際限なく成長することができます：あなたは、同じオブジェクトへの2つの参照の代わりに2つの異なるオブジェクトを取得

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

。