JavaScript克隆"类"实例

Ami*_*mit 16 javascript jquery clone object extend

我有一个类似这样的课程:

function Element(){
    this.changes = {};
}
Run Code Online (Sandbox Code Playgroud)

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

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

现在有些情况下我需要其中一个元素的副本,所以我需要做类似的事情var cloned = $.extend(true, {}, states[0]).在这里,我假设我们正在克隆第一个州.

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

陷入如此微不足道的问题是令人沮丧的......

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

kub*_*etz 5

$.extend仅克隆普通对象。如果对象具有构造函数,则不会克隆它,而只是将其复制。

$.extend来源:

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

因此,将具有false的$.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
// ...
Run Code Online (Sandbox Code Playgroud)

变成:

var el = { changes: {} };  // $.isPlainObject(el); <- true
// ...
Run Code Online (Sandbox Code Playgroud)

它将el正确克隆。在这里看到它。