왜 내가 자바 스크립트 배열에 같은 요소를 삽입 할 수 없습니다?

Question

개체 배열이 있습니다. 그러나 이전에 추가 한 객체를 삽입하면 이전 객체를 덮어 씁니다. 어떻게 해결할 수 있습니까?

플레이어라는 개체가 있습니다. 플레이어에는 onHandWeapon이라는 하나의 배열과 onFieldWeapon이라는 배열이 있습니다. 그것들은 무기 객체의 배열입니다.

function player(lp){ 
     this.lp = lp; 
     this.onFieldWeapon = new Array(); 
     this.onHandWeapon = new Array(); 

    } 

function weapon(id, heart, bullet, src){ 
      this.id = id; 
      this.heart = heart; 
      this.bullet = bullet; 
      this.src = src; 
      this.location; 
      this.name; 
      this.discription; 
      this.bufferBullet = bullet; 
    } 

I는 onHandWeapon 어레이 세 더미 오브젝트를 설정했다. 그런 다음 그 중 하나를 무작위로 선택하여 onFieldWeapon에 배치하고 임의의 위치를 ​​할당하려고합니다.

function aiCreateWeapon(){ 
     var b = Math.floor(Math.random()*ai.onHandWeapon.length); 
     $('#console').append(' ' + b + ' '); 
     var ip = 100; 

     while($('#'+ip).attr('class') != 'enemyField'){ 
      ip = Math.floor(Math.random()*48); 
     } 

     encurrentWeapon = ai.onHandWeapon[b]; 

     var source = encurrentWeapon.src; 

     var oImg = document.createElement("img"); 
     oImg.setAttribute('src', source); 
     oImg.setAttribute('height', '60px'); 
     oImg.setAttribute('width', '60px'); 
     $('#'+ip).append(oImg).show('explode','slow'); 

     encurrentWeapon.location = ip; 
     ai.onFieldWeapon.push(encurrentWeapon); 

     $('#console').append(' ' + ai.onFieldWeapon[0].location + ' '); 
} 

aiCreateWeapon은 버튼에 바인딩되는 기능입니다. 그것을 클릭하면 ai.onFieldWeapon [0] .location은 변경 될 때까지 고정 된 위치입니다. 첫 번째 요소와 동일한 개체가 onFieldWeapon 배열에 추가 될 때마다 첫 번째 요소의 데이터를 재정의한다는 것을 확인했습니다.

Answer 1

같은 개체를 여러 번 배열에 삽입하면 동일한 기본 개체에 대한 모든 참조 인 배열에 여러 항목이 생깁니다. 다음 예제에서 myArray 및 x 및 y 및 myObj 변수의 세 항목이 모두 동일한 기본 객체를 가리키고 있으므로 배열 항목 중 하나를 통해 객체의 속성을 변경하면 다른 항목도 업데이트됩니다 그것은 다른 배열 항목 방금 변경 같은 개체를 가리키는 지는 다음과 때마다 개체의 복사

그것은 당신이 생성되어 수행 할 작업 같은 소리

var myObj = { "p1" : "v1", "p2" : "v2" }; 
var myArray = []; 
// all of the following reference the same underlying object as myObj, 
// not copies of myObj. 
myArray.push(myObj); 
myArray.push(myObj); 
myArray.push(myObj); 
var x = myObj, 
    y = myObj; 
myArray[1].p1 = "new value"; 
alert(myArray[0].p1); // "new value" 
alert(x.p1); // "new value" 

있도록 배열의 각 항목 모든 다른 개체에 영향을주지 않고 업데이트 할 수있는 독립적 인 개체입니다. 불행히도 자바 스크립트에서는 그렇게 할 수있는 기본 제공 방법이 없습니다. 당신은 단지 하나의 차원 객체를 갖고있는 것 같다 곳 다행히 특히 귀하의 경우, 자신의 개체 복사 함수를 작성하는 것이 특히 어렵지 않다 :

function copyObject(srcObj) { 
    // create new blank object and copy the direct properties one by one 
    var newObj = {}; 
    for (var k in srcObj) 
     if (srcObj.hasOwnProperty(k)) 
      newObj[k] = srcObj[k]; 
    return newObj; 
} 

var myObj = { "p1" : "v1", "p2" : "v2" }; 
var myArray = []; 
// make independent copies instead of just more references to the same object 
myArray.push(copyObject(myObj)); 
myArray.push(copyObject(myObj)); 
myArray.push(copyObject(myObj)); 
var x = copyObject(myObj), 
    y = copyObject(myObj); 
myArray[1].p1 = "new value"; 
alert(myArray[0].p1); // "v1" 

는 객체 나 배열 다음 copyObject() 기능 요구 사항을 포함하는 개체가있는 경우 좀 더 복잡해지기 위해서 - 보통 어떤 형태의 재귀가 사용됩니다.