如何在javascript中深度克隆

javascript

2022-08-30 04:02:32

如何深度克隆 JavaScript 对象？

我知道有各种基于框架的功能，但我不想使用这样的框架。JSON.parse(JSON.stringify(o))$.extend(true, {}, o)

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

我们确实关心像克隆阵列这样的边缘情况。不打破原型链，处理自我参考。

我们不关心支持DOM对象的复制等，因为出于这个原因而存在。.cloneNode

由于我主要想使用深度克隆，在使用ES5功能的V8引擎是可以接受的。node.js

[编辑]

在有人建议之前，让我提一下，通过原型从对象继承和克隆它来创建副本之间存在明显的区别。前者使原型链变得一团糟。

[进一步编辑]

在阅读了您的答案后，我发现了一个令人讨厌的发现，即克隆整个对象是一个非常危险和困难的游戏。以下面基于闭包的对象为例

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

现实世界应该不再需要这样的功能了。这仅仅是学术兴趣。

答案 1

很简单的方法，也许太简单了：

var cloned = JSON.parse(JSON.stringify(objectToClone));

答案 2

这实际上取决于您要克隆的内容。这是一个真正的JSON对象还是JavaScript中的任何对象？如果您想进行任何克隆，它可能会给您带来一些麻烦。哪个麻烦？我将在下面解释它，但首先，一个克隆对象文本，任何基元，数组和DOM节点的代码示例。

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";
            }   
        }
    ]
})

现在，让我们来谈谈在开始克隆真实对象时可能遇到的问题。我现在说的是，关于你通过做这样的事情来创建的对象。

var User = function(){}
var newuser = new User();

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

那么，为什么克隆会很痛苦呢？好吧，首先，每个对象/实例都可能具有某种状态。例如，您永远无法确定您的对象没有私有变量，如果是这种情况，通过克隆对象，您只需打破状态即可。

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

new User({
   bike : someBikeInstance
});

如果是这种情况，那么您就不走运了，某些BikeInstance可能是在某个上下文中创建的，并且该上下文对于克隆方法来说是未知的。

那么该怎么办呢？您仍然可以进行解决方案，并将此类对象视为普通对象文本，但也许根本不克隆此类对象并传递此对象的引用是一个想法？for in

另一种解决方案是 - 您可以设置一个约定，即所有必须克隆的对象都应自行实现此部分并提供适当的API方法（如 cloneObject）。为DOM做些什么。cloneNode

由您决定。