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?