首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在javascript中进行深度克隆

如何在javascript中进行深度克隆
EN

Stack Overflow用户
提问于 2010-12-16 18:49:52
回答 18查看 149K关注 0票数 125

如何深度克隆JavaScript对象?

我知道有很多基于框架的函数,比如JSON.parse(JSON.stringify(o))$.extend(true, {}, o),但我不想使用这样的框架。

创建深度克隆的最优雅或最有效的方法是什么?

我们确实关心像克隆数组这样的边缘情况。不破坏原型链,处理自我引用。

我们并不关心是否支持复制DOM对象等,因为.cloneNode的存在就是出于这个原因。

因为我主要想在node.js中使用深度克隆,所以使用V8引擎的ES5特性是可以接受的。

编辑

在任何人提出建议之前,让我先提一下,通过原型继承对象来创建副本和克隆它之间存在明显的区别。前者把原型链搞得一团糟。

在读完你的答案后,我发现克隆整个对象是一个非常危险和困难的游戏。以下面的基于闭包的对象为例

代码语言:javascript
复制
var o = (function() {
     var magic = 42;

     var magicContainer = function() {
          this.get = function() { return magic; };
          this.set = function(i) { magic = i; };
     }

      return new magicContainer;
}());

var n = clone(o); // how to implement clone to support closures

有没有办法写一个克隆函数来克隆对象,在克隆时具有相同的状态,但如果不用JS编写JS解析器就不能改变o的状态。

在现实世界中应该不再需要这样的函数了。这仅仅是学术兴趣。

EN

回答 18

Stack Overflow用户

回答已采纳

发布于 2010-12-16 20:13:15

这真的取决于你想克隆什么。这是一个真正的JSON对象,还是JavaScript中的任何对象?如果你想做任何克隆,可能会给你带来一些麻烦。什么麻烦?我将在下面解释它,但首先是一个代码示例,它克隆对象文字、任何原语、数组和DOM节点。

代码语言:javascript
复制
function clone(item) {
    if (!item) { return item; } // null, undefined values check

    var types = [ Number, String, Boolean ], 
        result;

    // normalizing primitives if someone did new String('aaa'), or new Number('444');
    types.forEach(function(type) {
        if (item instanceof type) {
            result = type( item );
        }
    });

    if (typeof result == "undefined") {
        if (Object.prototype.toString.call( item ) === "[object Array]") {
            result = [];
            item.forEach(function(child, index, array) { 
                result[index] = clone( child );
            });
        } else if (typeof item == "object") {
            // testing that this is DOM
            if (item.nodeType && typeof item.cloneNode == "function") {
                result = item.cloneNode( true );    
            } else if (!item.prototype) { // check that this is a literal
                if (item instanceof Date) {
                    result = new Date(item);
                } else {
                    // it is an object literal
                    result = {};
                    for (var i in item) {
                        result[i] = clone( item[i] );
                    }
                }
            } else {
                // depending what you would like here,
                // just keep the reference, or create new object
                if (false && item.constructor) {
                    // would not advice to do that, reason? Read below
                    result = new item.constructor();
                } else {
                    result = item;
                }
            }
        } else {
            result = item;
        }
    }

    return result;
}

var copy = clone({
    one : {
        'one-one' : new String("hello"),
        'one-two' : [
            "one", "two", true, "four"
        ]
    },
    two : document.createElement("div"),
    three : [
        {
            name : "three-one",
            number : new Number("100"),
            obj : new function() {
                this.name = "Object test";
            }   
        }
    ]
})

现在,让我们讨论一下在开始克隆真实对象时可能会遇到的问题。我现在讨论的是通过如下操作创建的对象

代码语言:javascript
复制
var User = function(){}
var newuser = new User();

当然你可以克隆它们,这不是问题,每个对象都公开构造函数属性,你可以用它来克隆对象,但它并不总是有效的。你也可以在这个对象上执行简单的for in,但它的方向是相同的--麻烦。我还在代码中包含了克隆功能,但if( false )语句将其排除在外。

那么,为什么克隆会是一件痛苦的事情呢?首先,每个对象/实例都可能有一些状态。你永远不能确定你的对象没有私有变量,如果是这样的话,通过克隆对象,你只是打破了状态。

想象一下没有状态,这很好。那么我们还有另一个问题。通过“构造函数”方法进行克隆将给我们带来另一个障碍。这是一个参数依赖关系。你永远不能确定,创建这个对象的人,并没有做,某种

代码语言:javascript
复制
new User({
   bike : someBikeInstance
});

如果是这样的话,你就不走运了,someBikeInstance可能是在某个上下文中创建的,而该上下文对于克隆方法来说是未知的。

那该怎么办呢?您仍然可以使用for in解决方案,并将此类对象视为普通的对象字面量,但也许根本不克隆此类对象,而只是传递此对象的引用?

另一种解决方案是-你可以设置一个约定,所有必须克隆的对象都应该自己实现这一部分,并提供适当的应用程序接口方法(如cloneObject )。cloneNode正在为DOM做的事情。

你决定吧。

票数 75
EN

Stack Overflow用户

发布于 2015-01-30 02:52:02

非常简单的方式,也许太简单了:

代码语言:javascript
复制
var cloned = JSON.parse(JSON.stringify(objectToClone));
票数 168
EN

Stack Overflow用户

发布于 2016-10-28 04:56:04

下面是一个ES6函数,它也适用于具有循环引用的对象:

代码语言:javascript
复制
function deepClone(obj, hash = new WeakMap()) {
    if (Object(obj) !== obj) return obj; // primitives
    if (hash.has(obj)) return hash.get(obj); // cyclic reference
    const result = obj instanceof Set ? new Set(obj) // See note about this!
                 : obj instanceof Map ? new Map(Array.from(obj, ([key, val]) => 
                                        [key, deepClone(val, hash)])) 
                 : obj instanceof Date ? new Date(obj)
                 : obj instanceof RegExp ? new RegExp(obj.source, obj.flags)
                 // ... add here any specific treatment for other classes ...
                 // and finally a catch-all:
                 : obj.constructor ? new obj.constructor() 
                 : Object.create(null);
    hash.set(obj, result);
    return Object.assign(result, ...Object.keys(obj).map(
        key => ({ [key]: deepClone(obj[key], hash) }) ));
}

// Sample data
var p = {
  data: 1,
  children: [{
    data: 2,
    parent: null
  }]
};
p.children[0].parent = p;

var q = deepClone(p);

console.log(q.children[0].parent.data); // 1

关于集合和映射的一个注记

如何处理集合和映射的键是有争议的:这些键通常是原语(在这种情况下没有争论),但它们也可以是对象。在这种情况下,问题就变成了:这些密钥应该被克隆吗?

有人可能会争辩说,应该这样做,以便如果这些对象在副本中发生变化,原始对象中的对象不会受到影响,反之亦然。

另一方面,人们希望如果Set/Map has a key,这在原始和副本中都应该是真的-至少在对它们中的任何一个进行任何更改之前都是如此。如果副本是具有以前从未出现过的键(因为它们是在克隆过程中创建的)的Set/Map,这将是奇怪的:对于任何需要知道给定对象是否为该Set/Map中的键的代码来说,这肯定不是很有用。

正如您注意到的,我更倾向于第二种观点:Set和Map的键是应该保持不变的值(可能是引用)。

这样的选择通常也会出现在其他(可能是自定义的)对象中。没有通用的解决方案,因为这在很大程度上取决于克隆对象在特定情况下的预期行为。

票数 26
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4459928

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档