如何正确克隆 JavaScript 对象？

Question

我有一个对象， x. 。我想将其复制为对象 y, ，这样就变成了 y 请勿修改 x. 。我意识到复制从内置 JavaScript 对象派生的对象会产生额外的、不需要的属性。这不是问题，因为我正在复制我自己的文字构造的对象之一。

如何正确克隆 JavaScript 对象？

Answer 1

要用于在JavaScript中的任何对象做这不会是简单的或直接的。你会遇到的错误拿起从对象的原型属性应该在原型留下，而不是复制到新实例的问题。如果，例如，您要添加clone方法Object.prototype，因为一些答案描绘，则需要明确地跳过属性。但如果有其他额外的方法添加什么Object.prototype，或其他中间的原型，你不知道？在这种情况下，你会复制你不应该的属性，所以你需要检测与的 hasOwnProperty 方法

在除了不可枚举的属性，您会在尝试复制具有隐藏属性的对象遇到强硬的问题。例如，prototype是一个函数的隐藏属性。此外，对象的原型与属性__proto__，其也被隐藏引用，并且将不会被复制一个for / in循环遍历源对象的属性。我想__proto__可能是专门针对Firefox的JavaScript解释器，它可能是一些在其他浏览器不同，但你得到的图片。并非一切都是枚举。如果你知道它的名字，您可以复制一个隐藏属性，但我不知道有什么方法能够自动发现它。

然而，在寻求一种优雅的解决方案的另一个困难是正确地建立原型继承的问题。如果源对象的原型Object，然后简单地创建与{}一个新的通用对象的工作，但如果源的原型是Object的一些后代，那么你将要丢失从原型您使用hasOwnProperty跳过了其他成员过滤器，或者是在原型的，但不是首先枚举。一种解决方案可能是调用源对象的constructor属性来获取初始复制对象，然后拷贝过来的属性，但你仍然不会得到不可枚举的属性。例如， Date 对象存储其数据作为隐藏构件：

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}

var d1 = new Date();

/* Executes function after 5 seconds. */
setTimeout(function(){
    var d2 = clone(d1);
    alert("d1 = " + d1.toString() + "\nd2 = " + d2.toString());
}, 5000);

有d1的日期字符串将是后面的是d2的5秒。一种方法，使一个Date另一个相同是通过调用setTime方法，但这是特定于Date类。我不认为有这个问题防弹通用的解决方案，但我会很乐意错！

当我不得不实施一般深度复制我最终通过假设我只需要复制一个普通Object，Array，Date，String，Number，或Boolean损害。最后的3种类型是不可变的，这样我就可以执行浅拷贝，而不是担心改变。我还假设包含在Object或Array任何元件也将是6种简单类型在该列表中的一个。这可以用如下面的代码来实现：

function clone(obj) {
    var copy;

    // Handle the 3 simple types, and null or undefined
    if (null == obj || "object" != typeof obj) return obj;

    // Handle Date
    if (obj instanceof Date) {
        copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    // Handle Array
    if (obj instanceof Array) {
        copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = clone(obj[i]);
        }
        return copy;
    }

    // Handle Object
    if (obj instanceof Object) {
        copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy obj! Its type isn't supported.");
}

上述功能将充分地工作为6种简单类型我所提到的，只要在对象和数组数据形成一个树结构。也就是说，有不超过一个参考对象中的相同的数据。例如：

// This would be cloneable:
var tree = {
    "left"  : { "left" : null, "right" : null, "data" : 3 },
    "right" : null,
    "data"  : 8
};

// This would kind-of work, but you would get 2 copies of the 
// inner node instead of 2 references to the same copy
var directedAcylicGraph = {
    "left"  : { "left" : null, "right" : null, "data" : 3 },
    "data"  : 8
};
directedAcyclicGraph["right"] = directedAcyclicGraph["left"];

// Cloning this would cause a stack overflow due to infinite recursion:
var cyclicGraph = {
    "left"  : { "left" : null, "right" : null, "data" : 3 },
    "data"  : 8
};
cyclicGraph["right"] = cyclicGraph;

这不会是能够处理任何JavaScript对象，但它可能是足够的许多purposes只要你不要以为它只是为任何你扔在它的工作。

Answer 2

如果你没有你的对象中使用Dates，功能，未定义或无限，很简单的一个内胆JSON.parse(JSON.stringify(object))：

const a = {
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: new Date(),  // stringified
  undef: undefined,  // lost
  inf: Infinity,  // forced to 'null'
}
console.log(a);
console.log(typeof a.date);  // Date object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
console.log(typeof clone.date);  // result of .toISOString()