提问



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


如何正确克隆JavaScript对象?

最佳参考


更新回答



只需按照[125] 的建议使用Object.assign()





过时的答案



为JavaScript中的任何对象执行此操作并不简单或直接。您将遇到错误地从对象原型中拾取属性的问题,该原型应保留在原型中而不会复制到新实例。例如,如果您要将clone方法添加到clone方法中Object.prototype,正如一些答案所描述的那样,你需要明确地跳过那个属性。但如果Object.prototype或其他中间原型中添加了其他额外的方法,你还不知道怎么办?在这种情况下,您将复制您不应该使用的属性,因此您需要使用hasOwnProperty方法检测无法预料的非本地属性。[127]


除了不可枚举的属性之外,当您尝试复制具有隐藏属性的对象时,您将遇到更严峻的问题。例如,prototype是函数的隐藏属性。此外,对象的原型是引用属性__proto__,它也是隐藏的,并且不会被for/in循环复制,迭代源对象的属性。我认为__proto__可能特定于Firefox的JavaScript解释器,它可能在其他浏览器中有所不同,但你得到的图片。并非一切都是可以计算的。如果您知道其名称,则可以复制隐藏属性,但我不知道有任何方法可以自动发现它。


寻求优雅解决方案的另一个障碍是正确设置原型继承的问题。如果您的源对象的原型是Object,那么只需用{}创建一个新的通用对象就行了,但如果源的原型是Object的某些后代,那么你是将缺少你使用hasOwnProperty过滤器跳过的原型中的其他成员,或者原型中的那些,但是首先不能枚举。一个解决方案可能是调用源对象s constructor属性获取初始复制对象,然后复制属性,但是您仍然不会获得不可枚举的属性。例如,Date对象将其数据存储为隐藏成员: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类特有的。我不认为这个问题有一个防弹的一般解决方案,但我很乐意错!


当我不得不实施一般的深度复制时,我最终通过假设我只需复制普通ObjectArrayDateStringNumber,或Boolean。最后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对象,但它可能足以用于许多目的,只要你不认为它只适用于你抛出的任何东西。

其它参考1


使用jQuery,您可以使用extend 浅拷贝:[129]


var copiedObject = jQuery.extend({}, originalObject)


对copiedObject的后续更改不会影响originalObject,反之亦然。


或者制作深层副本:


var copiedObject = jQuery.extend(true, {}, originalObject)

其它参考2


如果您不在对象中使用函数,则可以使用以下非常简单的内容:


var cloneOfA = JSON.parse(JSON.stringify(a));


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


另请参阅本文关于在向工作人员发送消息和从工作人员发布消息时使用的浏览器的结构化克隆算法。它还包含深度克隆功能。[130]

其它参考3


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


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


但请注意,嵌套对象仍会被复制为引用。

其它参考4


有许多答案,但没有提到ECMAScript 5中的Object.create,它确实没有给你一个精确的副本,但是将源设置为新对象的原型。[132]


因此,这不是问题的确切答案,但它是一个单行解决方案,因而优雅。它适用于2种情况:



  1. 这种继承有用(呃!)

  2. 无法修改源对象,从而使两个对象之间的关系成为非问题。



例:


var foo = { a : 1 };
var bar = Object.create(foo);
foo.a; // 1
bar.a; // 1
foo.a = 2;
bar.a; // 2 - prototype changed
bar.a = 3;
foo.a; // Still 2, since setting bar.a makes it an "own" property


为什么我认为这个解决方案更优越?它是原生的,因此没有循环,没有递归。但是,旧的浏览器需要一个polyfill。

其它参考5


在一行代码中克隆Javascript对象的优雅方法



Object.assign方法是ECMAScript 2015(ES6)标准的一部分,可以完全满足您的需求。


var clone = Object.assign({}, obj);



  Object.assign()方法用于将所有可枚举的自有属性的值从一个或多个源对象复制到目标对象。



阅读更多...... [133]


polyfill 支持旧版浏览器:


if (!Object.assign) {
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }

      var to = Object(target);
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        if (nextSource === undefined || nextSource === null) {
          continue;
        }
        nextSource = Object(nextSource);

        var keysArray = Object.keys(nextSource);
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}

其它参考6


按MDN:[134]



  • 如果您想要浅色复印,请使用Object.assign({}, a)

  • 对于深度复制,请使用JSON.parse(JSON.stringify(a))



不需要外部库,但您需要先检查浏览器兼容性。[135]

其它参考7


如果您对浅拷贝没问题,则underscore.js库有一个克隆方法。[136]


y = _.clone(x);


或者你可以扩展它


copiedObject = _.extend({},originalObject);

其它参考8


互联网上的大多数解决方案存在几个问题。所以我决定进行跟进,其中包括为什么接受的答案不应被接受。


起始情况



我希望深度复制 Javascript Object及其所有子及其子女等等。但由于我不是一个普通的开发人员,我的Object 正常 propertiescircular structures甚至nested objects


所以让我们首先创建circular structurenested object


function Circ() {
    this.me = this;
}

function Nested(y) {
    this.y = y;
}


让我们将Object命名为a中的所有内容。


var a = {
    x: 'a',
    circ: new Circ(),
    nested: new Nested('a')
};


接下来,我们想将a复制到名为b的变量中并对其进行变异。


var b = a;

b.x = 'b';
b.nested.y = 'b';


你知道这里发生了什么,因为如果不是你,你甚至不会谈到这个伟大的问题。


console.log(a, b);

a --> Object {
    x: "b",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

b --> Object {
    x: "b",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}


现在让我们找到一个解决方案。


JSON



我尝试的第一次尝试是使用JSON


var b = JSON.parse( JSON.stringify( a ) );

b.x = 'b';
b.nested.y = 'b';


不要浪费太多时间,你会得到TypeError: Converting circular structure to JSON


递归副本(接受的答案)



让我们看看接受的答案。


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

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

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

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

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


看起来不错,嘿?它是对象的递归副本,并处理其他类型,如Date,但这不是一个要求。


var b = cloneSO(a);

b.x = 'b';
b.nested.y = 'b';


递归和circular structures并不能很好地协同工作...... RangeError: Maximum call stack size exceeded


原生解决方案



在和我的同事争吵后,我的老板问我们发生了什么,他在谷歌搜索后发现了一个简单的解决方案。它被称为Object.create


var b = Object.create(a);

b.x = 'b';
b.nested.y = 'b';


这个解决方案前一段时间被添加到Javascript甚至处理circular structure


console.log(a, b);

a --> Object {
    x: "a",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

b --> Object {
    x: "b",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}


...而且你看,它不适用于里面的嵌套结构。


原生溶液的填充物



就像IE 8一样,旧版浏览器中的Object.create是一个polyfill。它类似于Mozilla推荐的东西,当然,它并不完美,导致与 native相同的问题溶液。


function F() {};
function clonePF(o) {
    F.prototype = o;
    return new F();
}

var b = clonePF(a);

b.x = 'b';
b.nested.y = 'b';


我已经F超出了范围,所以我们可以看看instanceof告诉我们的内容。


console.log(a, b);

a --> Object {
    x: "a",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

b --> F {
    x: "b",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

console.log(typeof a, typeof b);

a --> object
b --> object

console.log(a instanceof Object, b instanceof Object);

a --> true
b --> true

console.log(a instanceof F, b instanceof F);

a --> false
b --> true


与原生解决方案相同的问题,但输出稍差。


更好(但不完美)的解决方案



在挖掘时,我发现了一个类似的问题(在Javascript中,当执行深层复制时,如何避免一个循环,由于属性是这个?)到这个,但有一个更好的解决方案。


function cloneDR(o) {
    const gdcc = "__getDeepCircularCopy__";
    if (o !== Object(o)) {
        return o; // primitive value
    }

    var set = gdcc in o,
        cache = o[gdcc],
        result;
    if (set && typeof cache == "function") {
        return cache();
    }
    // else
    o[gdcc] = function() { return result; }; // overwrite
    if (o instanceof Array) {
        result = [];
        for (var i=0; i<o.length; i++) {
            result[i] = cloneDR(o[i]);
        }
    } else {
        result = {};
        for (var prop in o)
            if (prop != gdcc)
                result[prop] = cloneDR(o[prop]);
            else if (set)
                result[prop] = cloneDR(cache);
    }
    if (set) {
        o[gdcc] = cache; // reset
    } else {
        delete o[gdcc]; // unset again
    }
    return result;
}

var b = cloneDR(a);

b.x = 'b';
b.nested.y = 'b';


让我们来看看输出......


console.log(a, b);

a --> Object {
    x: "a",
    circ: Object {
        me: Object { ... }
    },
    nested: Object {
        y: "a"
    }
}

b --> Object {
    x: "b",
    circ: Object {
        me: Object { ... }
    },
    nested: Object {
        y: "b"
    }
}

console.log(typeof a, typeof b);

a --> object
b --> object

console.log(a instanceof Object, b instanceof Object);

a --> true
b --> true

console.log(a instanceof F, b instanceof F);

a --> false
b --> false


这些要求是匹配的,但仍然存在一些较小的问题,包括将nestedcircinstance改为Object



  共享一片叶子的树木的结构不会被复制,它们将成为两片独立的叶子:



        [Object]                     [Object]
         /    \                       /    \
        /      \                     /      \
      |/_      _\|                 |/_      _\|  
  [Object]    [Object]   ===>  [Object]    [Object]
       \        /                 |           |
        \      /                  |           |
        _\|  |/_                 \|/         \|/
        [Object]               [Object]    [Object]


结论



使用递归和缓存的最后一个解决方案可能不是最好的,但它是对象的真实深层副本。它处理简单propertiescircular structures和[[nested object,但克隆时它会搞乱它们的实例。


http://jsfiddle.net/einfallstoll/N4mr2/[138]

其它参考9


一个特别不优雅的解决方案是使用JSON编码来制作没有成员方法的对象的深层副本。方法是对您的目标对象进行JSON编码,然后通过对其进行解码,您将获得所需的副本。您可以根据需要进行多次解码,然后根据需要进行复制。


当然,函数不属于JSON,因此这仅适用于没有成员方法的对象。


这种方法非常适合我的用例,因为我将JSON blob存储在键值存储中,当它们作为JavaScript API中的对象公开时,每个对象实际上都包含对象原始状态的副本,所以我们可以在调用者突变暴露的对象后计算增量。


var object1 = {key:"value"};
var object2 = object1;

object2 = JSON.stringify(object1);
object2 = JSON.parse(object2);

object2.key = "a change";
console.log(object1);// returns value

其它参考10


对于那些使用AngularJS的人来说,还有直接的方法来克隆或扩展这个库中的对象。


var destination = angular.copy(source);


要么


angular.copy(source, destination);


更多angular.copy文档... [139]

其它参考11


您可以简单地使用spread属性来复制没有引用的对象。但要小心(参见注释),复制只是在最低的对象/数组级别。嵌套属性仍然是引用![140]





完整克隆:


let x = {a: 'value1'}
let x2 = {...x}

// => mutate without references:

x2.a = 'value2'
console.log(x.a)    // => 'value1'


在第二级克隆引用:


const y = {a: {b: 'value3'}}
const y2 = {...y}

// => nested object is still a references:

y2.a.b = 'value4'
console.log(y.a.b)    // => 'value4'





JavaScript本身实际上不支持深度克隆。使用实用程序功能。例如Ramda:



  http://ramdajs.com/docs/#clone[141]


其它参考12


好的,想象下面你有这个对象,你想克隆它:


let obj = {a:1, b:2, c:3}; //ES6


要么


var obj = {a:1, b:2, c:3}; //ES5


答案主要取决于你使用的 ECMAscript ,在ES6+中,你可以简单地使用Object.assign来做克隆:


let cloned = Object.assign({}, obj); //new {a:1, b:2, c:3};


或使用像这样的传播运算符:


let cloned = {...obj}; //new {a:1, b:2, c:3};


但是如果你使用ES5,你可以使用很少的方法,但是JSON.stringify,只是确保你没有使用大块数据来复制,但在许多情况下它可能是一种方便的方式,像这样:


let cloned = JSON.parse(JSON.stringify(obj)); 
//new {a:1, b:2, c:3};, can be handy, but avoid using on big chunk of data over and over

其它参考13


A.Levy的回答几乎完成,这是我的小贡献:有一种方法如何处理递归引用,看到这一行


if(this[attr]==this) copy[attr] = copy;


如果对象是XML DOM元素,我们必须使用 cloneNode


if(this.cloneNode) return this.cloneNode(true);


受A.Levy的详尽研究和Calvin的原型设计方法的启发,我提供了这个解决方案:


Object.prototype.clone = function() {
  if(this.cloneNode) return this.cloneNode(true);
  var copy = this instanceof Array ? [] : {};
  for(var attr in this) {
    if(typeof this[attr] == "function" || this[attr]==null || !this[attr].clone)
      copy[attr] = this[attr];
    else if(this[attr]==this) copy[attr] = copy;
    else copy[attr] = this[attr].clone();
  }
  return copy;
}

Date.prototype.clone = function() {
  var copy = new Date();
  copy.setTime(this.getTime());
  return copy;
}

Number.prototype.clone = 
Boolean.prototype.clone =
String.prototype.clone = function() {
  return this;
}


另见Andy Burke在答案中的注释。

其它参考14


本文:如何在Javascript中复制数组和对象Brian Huisman:[142]


Object.prototype.clone = function() {
  var newObj = (this instanceof Array) ? [] : {};
  for (var i in this) {
    if (i == 'clone') continue;
    if (this[i] && typeof this[i] == "object") {
      newObj[i] = this[i].clone();
    } else newObj[i] = this[i]
  } return newObj;
};

其它参考15


在ES-6中,您可以简单地使用Object.assign(...)。
例如:


let obj = {person: 'Thor Odinson'};
let clone = Object.assign({}, obj);


这里有一个很好的参考:
https://googlechrome.github.io/samples/object-assign-es6/[143]

其它参考16


这是您可以使用的功能。


function clone(obj) {
    if(obj == null || typeof(obj) != 'object')
        return obj;    
    var temp = new obj.constructor(); 
    for(var key in obj)
        temp[key] = clone(obj[key]);    
    return temp;
}

其它参考17


您可以使用一行代码克隆对象并从前一个引用中删除任何引用。简单地说:


var obj1 = { text: 'moo1' };
var obj2 = Object.create(obj1); // Creates a new clone without references

obj2.text = 'moo2'; // Only updates obj2's text property

console.log(obj1, obj2); // Outputs: obj1: {text:'moo1'}, obj2: {text:'moo2'}


对于当前不支持Object.create的浏览器/引擎,您可以使用此polyfill:


// Polyfill Object.create if it does not exist
if (!Object.create) {
    Object.create = function (o) {
        var F = function () {};
        F.prototype = o;
        return new F();
    };
}

其它参考18


对旧问题的新答案!如果您有幸使用带有Spread语法的ECMAScript 2016(ES6),那很容易。[144]


keepMeTheSame = {first: "Me!", second: "You!"};
cloned = {...keepMeTheSame}


这为对象的浅拷贝提供了一种干净的方法。制作深层复制,意味着在每个递归嵌套对象中设置每个值的新副本,需要上面较重的解决方案。


JavaScript不断发展。

其它参考19


使用Lodash:


var y = _.clone(x, true);

其它参考20


let clone = Object.assign( Object.create( Object.getPrototypeOf(obj)), obj)


ES6解决方案,如果您想(浅)克隆类实例而不仅仅是属性对象。

其它参考21


对克隆简单对象感兴趣:


JSON.parse(JSON.stringify(json_original));


来源:如何通过引用将JavaScript对象复制到新变量?

其它参考22


JanTotoň的答案非常接近,由于兼容性问题,可能是最好在浏览器中使用,但它可能会导致一些奇怪的枚举问题。例如,执行:


for ( var i in someArray ) { ... }


迭代遍历数组的元素后,将clone()方法赋给i。这是一个避免枚举并适用于node.js的改编:


Object.defineProperty( Object.prototype, "clone", {
    value: function() {
        if ( this.cloneNode )
        {
            return this.cloneNode( true );
        }

        var copy = this instanceof Array ? [] : {};
        for( var attr in this )
        {
            if ( typeof this[ attr ] == "function" || this[ attr ] == null || !this[ attr ].clone )
            {
                copy[ attr ] = this[ attr ];
            }
            else if ( this[ attr ] == this )
            {
                copy[ attr ] = copy;
            }
            else
            {
                copy[ attr ] = this[ attr ].clone();
            }
        }
        return copy;
    }
});

Object.defineProperty( Date.prototype, "clone", {
    value: function() {
        var copy = new Date();
        copy.setTime( this.getTime() );
        return copy;
    }
});

Object.defineProperty( Number.prototype, "clone", { value: function() { return this; } } );
Object.defineProperty( Boolean.prototype, "clone", { value: function() { return this; } } );
Object.defineProperty( String.prototype, "clone", { value: function() { return this; } } );


这避免了使clone()方法可枚举,因为defineProperty()默认为可枚举为false。

其它参考23


这是A. Levy的代码的改编,也用于处理函数和多个/循环引用的克隆 - 这意味着如果克隆的树中的两个属性是同一对象的引用,则克隆的对象树将将这些属性指向引用对象的同一个克隆。这也解决了循环依赖的情况,如果不处理,会导致无限循环。算法的复杂性为O(n)


function clone(obj){
    var clonedObjectsArray = [];
    var originalObjectsArray = []; //used to remove the unique ids when finished
    var next_objid = 0;

    function objectId(obj) {
        if (obj == null) return null;
        if (obj.__obj_id == undefined){
            obj.__obj_id = next_objid++;
            originalObjectsArray[obj.__obj_id] = obj;
        }
        return obj.__obj_id;
    }

    function cloneRecursive(obj) {
        if (null == obj || typeof obj == "string" || typeof obj == "number" || typeof obj == "boolean") return obj;

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

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

        // Handle Object
        if (obj instanceof Object) {
            if (clonedObjectsArray[objectId(obj)] != undefined)
                return clonedObjectsArray[objectId(obj)];

            var copy;
            if (obj instanceof Function)//Handle Function
                copy = function(){return obj.apply(this, arguments);};
            else
                copy = {};

            clonedObjectsArray[objectId(obj)] = copy;

            for (var attr in obj)
                if (attr != "__obj_id" && obj.hasOwnProperty(attr))
                    copy[attr] = cloneRecursive(obj[attr]);                 

            return copy;
        }       


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



    //remove the unique ids
    for (var i = 0; i < originalObjectsArray.length; i++)
    {
        delete originalObjectsArray[i].__obj_id;
    };

    return cloneObj;
}


一些快速测试


var auxobj = {
    prop1 : "prop1 aux val", 
    prop2 : ["prop2 item1", "prop2 item2"]
    };

var obj = new Object();
obj.prop1 = "prop1_value";
obj.prop2 = [auxobj, auxobj, "some extra val", undefined];
obj.nr = 3465;
obj.bool = true;

obj.f1 = function (){
    this.prop1 = "prop1 val changed by f1";
};

objclone = clone(obj);

//some tests i've made
console.log("test number, boolean and string cloning: " + (objclone.prop1 == obj.prop1 && objclone.nr == obj.nr && objclone.bool == obj.bool));

objclone.f1();
console.log("test function cloning 1: " + (objclone.prop1 == 'prop1 val changed by f1'));
objclone.f1.prop = 'some prop';
console.log("test function cloning 2: " + (obj.f1.prop == undefined));

objclone.prop2[0].prop1 = "prop1 aux val NEW";
console.log("test multiple references cloning 1: " + (objclone.prop2[1].prop1 == objclone.prop2[0].prop1));
console.log("test multiple references cloning 2: " + (objclone.prop2[1].prop1 != obj.prop2[0].prop1));

其它参考24


我已经编写了自己的实现。不确定它是否算作更好的解决方案:


/*
    a function for deep cloning objects that contains other nested objects and circular structures.
    objects are stored in a 3D array, according to their length (number of properties) and their depth in the original object.
                                    index (z)
                                         |
                                         |
                                         |
                                         |
                                         |
                                         |                      depth (x)
                                         |_ _ _ _ _ _ _ _ _ _ _ _
                                        /_/_/_/_/_/_/_/_/_/
                                       /_/_/_/_/_/_/_/_/_/
                                      /_/_/_/_/_/_/...../
                                     /................./
                                    /.....            /
                                   /                 /
                                  /------------------
            object length (y)    /
*/


以下是实施:


function deepClone(obj) {
    var depth = -1;
    var arr = [];
    return clone(obj, arr, depth);
}

/**
 *
 * @param obj source object
 * @param arr 3D array to store the references to objects
 * @param depth depth of the current object relative to the passed 'obj'
 * @returns {*}
 */
function clone(obj, arr, depth){
    if (typeof obj !== "object") {
        return obj;
    }

    var length = Object.keys(obj).length; // native method to get the number of properties in 'obj'

    var result = Object.create(Object.getPrototypeOf(obj)); // inherit the prototype of the original object
    if(result instanceof Array){
        result.length = length;
    }

    depth++; // depth is increased because we entered an object here

    arr[depth] = []; // this is the x-axis, each index here is the depth
    arr[depth][length] = []; // this is the y-axis, each index is the length of the object (aka number of props)
    // start the depth at current and go down, cyclic structures won't form on depths more than the current one
    for(var x = depth; x >= 0; x--){
        // loop only if the array at this depth and length already have elements
        if(arr[x][length]){
            for(var index = 0; index < arr[x][length].length; index++){
                if(obj === arr[x][length][index]){
                    return obj;
                }
            }
        }
    }

    arr[depth][length].push(obj); // store the object in the array at the current depth and length
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) result[prop] = clone(obj[prop], arr, depth);
    }

    return result;
}

其它参考25


我只想添加到这篇文章中的所有Object.create解决方案中,这对于nodejs来说并不是以所需的方式工作。


在Firefox中的结果


var a = {"test":"test"};
var b = Object.create(a);
console.log(b);´





{test:"test"}


在nodejs中


{}

其它参考26


function clone(src, deep) {

    var toString = Object.prototype.toString;
    if(!src && typeof src != "object"){
        //any non-object ( Boolean, String, Number ), null, undefined, NaN
        return src;
    }

    //Honor native/custom clone methods
    if(src.clone && toString.call(src.clone) == "[object Function]"){
        return src.clone(deep);
    }

    //DOM Elements
    if(src.nodeType && toString.call(src.cloneNode) == "[object Function]"){
        return src.cloneNode(deep);
    }

    //Date
    if(toString.call(src) == "[object Date]"){
        return new Date(src.getTime());
    }

    //RegExp
    if(toString.call(src) == "[object RegExp]"){
        return new RegExp(src);
    }

    //Function
    if(toString.call(src) == "[object Function]"){
        //Wrap in another method to make sure == is not true;
        //Note: Huge performance issue due to closures, comment this :)
        return (function(){
            src.apply(this, arguments);
        });

    }

    var ret, index;
    //Array
    if(toString.call(src) == "[object Array]"){
        //[].slice(0) would soft clone
        ret = src.slice();
        if(deep){
            index = ret.length;
            while(index--){
                ret[index] = clone(ret[index], true);
            }
        }
    }
    //Object
    else {
        ret = src.constructor ? new src.constructor() : {};
        for (var prop in src) {
            ret[prop] = deep
                ? clone(src[prop], true)
                : src[prop];
        }
    }

    return ret;
};

其它参考27


由于mindeavor声明要克隆的对象是文字构造的对象,因此解决方案可能是多次生成对象而不是克隆对象的实例:


function createMyObject()
{
    var myObject =
    {
        ...
    };
    return myObject;
}

var myObjectInstance1 = createMyObject();
var myObjectInstance2 = createMyObject();

其它参考28


Bellow是我的深度克隆版本,涵盖了函数和处理循环引用。


https://github.com/radsimu/UaicNlpToolkit/blob/master/Modules/GGS/GGSEngine/src/main/resources/ro/uaic/info/nlptools/ggs/engine/core/jsInitCode.js#L17[147]

其它参考29


请参阅http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data,了解W3C的安全传递结构化数据算法,旨在由浏览器实现,用于将数据传递给Web worker。但是,它有一些限制,因为它不处理函数。有关更多信息,请参阅https://developer.mozilla.org/en-US/docs/DOM/The_structured_clone_algorithm ,包括JS中的替代算法,它可以让你在那里的一部分。[148] [149]