开发者问题收集

如何正确克隆 JavaScript 对象?

2009-04-08
2418772

我有一个对象 x 。我想将其复制为对象 y ,这样对 y 的更改不会修改 x 。我意识到复制从内置 JavaScript 对象派生的对象会导致额外的、不必要的属性。这不是问题,因为我正在复制我自己的一个文字构造的对象。

如何正确克隆 JavaScript 对象?

3个回答

2022 年更新

有一个新的 JS 标准,称为 结构化克隆 。它适用于许多浏览器(请参阅 我可以使用吗 )。

const clone = structuredClone(object);

旧答案

对 JavaScript 中的任何对象执行此操作都不会简单或直接。您会遇到错误地从对象的原型中拾取属性的问题,这些属性应该留在原型中,而不是复制到新实例中。例如,如果您要向 Object.prototype 添加 clone 方法,正如一些答案所描述的那样,您将需要明确跳过该属性。但是,如果在 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 与另一个 Date 相同的一种方法是调用 setTime 方法,但该方法特定于 Date 类。我不认为这个问题有一个万无一失的通用解决方案,尽管我很乐意错了!

当我不得不实现一般的深度复制时,我最终妥协了,假设我只需要复制一个简单的 ObjectArrayDateStringNumberBoolean 。最后 3 种类型是不可变的,所以我可以执行浅拷贝而不必担心它会改变。我进一步假设 ObjectArray 中包含的任何元素也将是该列表中的 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 对象,但只要您不认为它能够处理您交给它的任何东西,它可能就足以满足许多目的。

A. Levy
2009-04-08

如果您的对象中未使用 Date 、函数、undefined、regExp 或 Infinity,则一个非常简单的一行代码是 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()

这适用于包含对象、数组、字符串、布尔值和数字的所有类型的对象。

另请参阅 这篇关于浏览器结构化克隆算法的文章 ,该算法用于向工作人员发送消息和从工作人员发送消息。它还包含一个用于深度克隆的函数。

heinob
2012-06-03

在 ECMAScript 6 中,有一个 Object.assign 方法,它将一个对象的所有可枚举自有属性的值复制到另一个对象。例如:

var x = {myProp: "value"};
var y = Object.assign({}, x); 

但请注意 这是一个浅拷贝 - 嵌套对象仍作为引用复制。

Vitalii Fedorenko
2015-05-05