如何在Javascript中深度复制（克隆）具有数组成员的对象？

介绍

我有一个班级Persons包含一个数组Person和功能：

function Persons() {
  this.mItems = []; // Array of Objects Person
}

Persons.prototype = {
  calculateScores : function() {
    // Do some stuff
  }
}

班上Person拥有成员及职能：

function Person(name) {
  this.name = name; // Name of the Person
  this.score = 0;
}

Person.prototype = {
  calculateScore : function() {
    // Do some stuff
  }
}

我希望该程序执行以下操作：

var persons = new Persons();
var person0 = new Person("John");
var person1 = new Person("Sam");
persons.mItems.push(person0);
persons.mItems.push(person1);

// Completely clone the original Objects
clonedPersons = persons.clone(); // I am looking for a clone() function

// Modify an item in the cloned Objects
clonedPersons.mItems[0].name = "Mick";

// Check that the original Objects have not been modified
console.log(persons.mItems[0].name); // John : Not modified
console.log(clonedPersons.mItems[0].name); // Mick

Question

我想深度复制一个实例Persons完全复制数组Person。对象 Person 必须重复。必须保留对象的功能。

JQuery.extend()

JQuery.extend(true, {}, persons)克隆直接成员Persons但浅复制Person对象。

console.log(persons.mItems[0].name); // Mick : Where is John ?!
console.log(clonedPersons.mItems[0].name); // Mick

JSON.parse(json.stringify())

clonedPersons = JSON.parse(json.stringify(persons))克隆对象但删除功能。

persons.mItems[0].calculateScore(); // Does not exists !!!

谢谢您的回答。

如果您正在处理自定义类，您将需要实现自定义clone方法。一般来说，在这种情况下，我会有 2 个单独的clone功能，其中之一Person模型和一个在Persons收藏。

Persons.prototype = {
  clone: function() {
    var clone = new Persons();
    clone.mItems = this.mItems.map(function(person) {
        return person.clone();
    });
    return clone;
  }
}

Person.prototype = {
  clone: function() {
    var clone = new Person(this.name);
    clone.score = this.score;
    return clone;
  }
}

这种方法的优点是它分离了关注点 -Person类不必知道如何克隆单个Person，它只需要知道Person暴露了一个clone方法。如果Person添加一个应保留在克隆中的新属性，仅Person需要改变。

使用泛型通常是一种反模式clone方法，例如在这种情况下，来自 jQuery 或 Underscore。他们最终会克隆你不想要的东西，或者错过你做的事情（例如Person最终可能会有一个Address或其他一些也需要克隆的对象）。