JavaScript持續變化

Question

我有一個數組20個對象BaseObjects調用ArrayBaseObjects。 用戶調用一個對象，將其加載到用戶界面中，並對屬性進行更改。 像這樣：

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

幾乎所有的JavaScript都是通過引用傳遞的。這意味着除非您顯式克隆一個對象，否則將該對象分配給一個新變量意味着現在您有兩個變量指向同一個對象，並且通過一個變量對該對象所做的更改將從第二個變量中可見。

對於如何解決這個問題的答案，你想要的是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?