자바 스크립트 변경 지속

Question

ArrayBaseObjects라는 20 개의 객체 BaseObjects 배열이 있습니다. 사용자가 개체를 호출하면 해당 개체가 UI에로드되고 속성을 변경합니다. 이런 뭔가 :

var ArrayBaseObjects = new Array(); 
var CurrentObject = null; 

function OpenRecord (TheIndex) { 
    CurrentObject = ArrayBaseObjects[TheIndex]; 
} 

function RecordChanges() { 
// bunch of statements that make changes to CurrenObject 
CurrentObject.CrazyStuff = NewValue; 
} 

문제는 사용자가 CurrentObject 변경을 할 때, 그것은 또한 ArrayBaseObjects 원래 객체의 값을 변경하는 점이다.

왜 그런지 모르겠습니까 ?? CurrentObject = ArrayBaseObjects[TheIndex];을 쓸 때 왜 CurrentObject를 변경하면 ArrayBaseObject에있는 객체의 값에도 영향을 줍니까 ??

나는 사용자가 변경 한 orignal 개체와 CurrentObject 사이의 값을 비교하려고하지만 항상 동일합니다. 이것이 내가 의도 한대로 작동하도록하기 위해 어떤 변화가 필요합니까?

설명해 주셔서 감사합니다.

Answer 1

자바 스크립트에서 거의 모든 것이 참조로 전달됩니다. 즉, 명시 적으로 개체를 복제하지 않으면 해당 개체를 새 변수에 할당하면 동일한 개체를 가리키는 두 개의 변수가 있고 그 중 하나의 변수를 통해 해당 개체에 대한 변경 사항이 두 번째 변수에서 볼 수 있음을 의미합니다.

이 문제를 해결하는 방법에 대한 답변은 clone입니다. 그러나 이것은 반드시 우아한 방식으로 수행하는 것은 사소한 일이 아닙니다.

다행히도 이미 JavaScript 닌자가 열심히 노력했습니다. jQuery을 사용하는 것이 좋습니다. extend() 메서드는 deep copy으로 지정할 수 있습니다. 이렇게하면 최상위 수준 참조가 아닌 개체의 모든 데이터가 복제됩니다.

자세한 내용은 this question을 참조하십시오.

귀하의 경우에는, 당신과 같이 사용합니다 :

var ArrayBaseObjects = []; 
var CurrentObject = {}; 

function OpenRecord (TheIndex) { 
    // This will perform a deep copy of all elements of the ArrayBaseObjects[TheIndex] 
    // into CurrentObject 
    jQuery.extend(true, CurrentObject, ArrayBaseObjects[TheIndex]); 
    // You could also call it like this, if you didn't need the CurrentObject variable: 
    // var clonedObject = jQuery.extend(true, {}, ArrayBaseObjects[TheIndex]); 
} 

function RecordChanges() { 
// bunch of statements that make changes to CurrenObject 
CurrentObject.CrazyStuff = NewValue; 
} 

Answer 2

이유는 변수가 객체가 아닌 객체 자체에 대한 참조를 잡고있다.

문

CurrentObject = ArrayBaseObjects[TheIndex]; 

는 CurrentObject의 값 ArrayBaseObjects[TheIndex]의 값과 동일 할 수있다. 두 값 모두 동일한 객체에 대한 참조 또는 포인터입니다. 여기에는 하나의 객체 만 있습니다. 두 개의 변수가 있습니다. 변수를 통해이 단일 객체의 속성을 변경할 수 있으며 다른 변수를 통해이 변경 내용을 볼 수 있습니다.

변수와 개체의 차이를 이해하는 데 모든 것이 필요합니다. JavaScript에서는 여러 변수가있는 객체 하나를 참조하는 것이 일반적입니다. 이것은 변수에 객체를 할당하거나 함수에 인수로 객체를 전달할 때마다 발생합니다.

var a = {x:1, y:2}; 
var b = a; 
b.x = 5; 
alert(a.x); // 5 

이유 : 여기

는 간단한 테스트입니까?

   +---------+ 
a ----------> | x [ 5 ] | 
       | y [ 2 ] | 
       +---------+ 
       ^
        | 
b -----------------+ 

하나의 개체, 두 개의 변수.

Answer 3

이는 ArrayBaseObjects [TheIndex]를 CurrentObject에 할당하면 참조가 할당되기 때문입니다. 방법 "클론"객체 여기를 참조하십시오 :

이

What is the most efficient way to deep clone an object in JavaScript?