JavaScript克隆“类”实例[重复]

Question

我有一堂课是这样的：

function Element(){
    this.changes = {};
}

现在我有一个这样的“类”实例，el = new Element()。这些实例存储在一个数组中，例如elements.push(el)。

这个元素数组现在存储在一个对象中，然后将其推入一个数组states。

现在在某些情况下我需要其中一个元素的副本，因此我需要执行类似var cloned = $.extend(true, {}, states[0]) 的操作。这里我假设我们正在克隆第一个状态。

现在的问题是我得到的 state[1].elements[0] 仍然指向原始实例。因此，我对克隆对象所做的任何更改都会更改原始对象。

卡在这样一个小问题上真是令人沮丧……

这是我为测试它而创建的小提琴： http://jsfiddle.net/E6wLW/

Answer 1

$.extend 只是克隆普通对象。如果对象有构造函数，那么它不会被克隆，而只是被复制。

来自$.extend 来源：

if ( jQuery.isPlainObject(copy) /* ... */) {
  // do the recursive $.extend call and clone the object                
} else if ( copy !== undefined ) {
  target[ name ] = copy;
  // ^^^^^ just copy
}

所以$.extend() 将调用isPlainObject(el)，这将返回false，因为el 有一个构造函数，而不是克隆el 被复制。所以states[1].elements[0] 和states[0].elements[0] 是同一个对象，因为它没有被克隆。

如果我们修改您的示例：

function Element(){
  this.changes = {};
}
var el = new Element();    // $.isPlainObject(el); <- false
// ...

进入：

var el = { changes: {} };  // $.isPlainObject(el); <- true
// ...

它将正确克隆el。看到它HERE。

Answer 2

您可以使用http://documentcloud.github.com/underscore/#clone 克隆对象，例如：

var cloned = _.clone(states[0]);