blocks|key|252329|text|更新:删除Object.create作为一种克隆方法，如评论所示。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|252330|++myObjTwo+=+myObjOne;|code-block|syntax|javascript|252331|不克隆。它只是简单地复制引用。|252332|如果要克隆，可以使用JSON.parse和JSON.stringify|252333|var+x+=+{a:{b:{c:{'d':'e'}}}};
var+y+=+JSON.parse(JSON.stringify(x));++//y+is+a+clone+of+x
console.log(y.a.b.c.d);+//prints+e
console.log(y+===+x);+//prints+false|252334|警告：正如在评论中提到的那样，这个基于JSON的克隆不会在输出对象中保留输入对象的方法。如果你的对象不包含任何方法，这个解决方案就足够好了。方法是作为函数的对象的属性。如果为var+obj+=+{add+:+function(a,b){return+a%2Bb;}}，则add是obj的一种方法。|BOLD|252335|如果你需要一个支持方法复制的解决方案，那么就来看看这些SO的答案(正如musefan，Matt和Ranhiru+Cooray指出的那样)|252336|252337|How+do+I+correctly+clone+a+JavaScript+object?|unordered-list-item|252338|What+is+the+most+efficient+way+to+deep+clone+an+object+in+JavaScript?|252339|252340|我建议使用How+do+I+correctly+clone+a+JavaScript+object?|252341|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/728360/copying-an-object-in-javascript|1|https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-a-javascript-object|2|https://stackoverflow.com/questions/728360/copying-an-object-in-javascript/728694#728694^0|5|D|0|0|0|A|A|L|E|0|0|0|3|2F|18|3P|3|3T|3|0|0|0|0|19|0|0|0|1X|1|0|0|5|19|2|0^^$0|@$1|2|3|4|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1J|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1K|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1L|8|@$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|1Q|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|1R|8|@$9|1S|A|1T|B|S]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]]|D|@]|E|$]]|$1|T|3|U|5|6|7|20|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|21|8|@]|D|@]|E|$]]|$1|W|3|X|5|Y|7|22|8|@]|D|@$9|23|A|24|1|25]]|E|$]]|$1|Z|3|10|5|Y|7|26|8|@]|D|@$9|27|A|28|1|29]]|E|$]]|$1|11|3|-4|5|6|7|2A|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|2B|8|@]|D|@$9|2C|A|2D|1|2E]]|E|$]]|$1|14|3|-4|5|6|7|2F|8|@]|D|@]|E|$]]]|15|$16|$5|17|18|19|E|$1A|1B]]|1C|$5|17|18|19|E|$1A|1D]]|1E|$5|17|18|19|E|$1A|1F]]]]

Update: Removing <code>Object.create</code> as a method of cloning as indicated in comments.

<pre><code> myObjTwo = myObjOne;
</code></pre>

does not clone. It simply copies the reference. 

If you want to clone, you can use <code>JSON.parse</code> and <code>JSON.stringify</code>

<pre><code>var x = {a:{b:{c:{'d':'e'}}}};
var y = JSON.parse(JSON.stringify(x)); //y is a clone of x
console.log(y.a.b.c.d); //prints e
console.log(y === x); //prints false
</code></pre>

Warning: As Raynos mentioned in comments, this JSON based clone does not retain methods of the input object in the output object. This solution is good enough if your object does not contain any methods. Methods are properties of a object that are functions. If <code>var obj = {add : function(a,b){return a+b;}}</code> then <code>add</code> is a method of <code>obj</code>.

If you need a solution that supports copying of methods, then go through these SO answers (as pointed out by musefan, Matt and Ranhiru Cooray)

<ul>
<li><a href="https://stackoverflow.com/questions/728360/copying-an-object-in-javascript">How do I correctly clone a JavaScript object?</a></li>
<li><a href="https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-a-javascript-object">What is the most efficient way to deep clone an object in JavaScript?</a></li>
</ul>

I would suggest <a href="https://stackoverflow.com/questions/728360/copying-an-object-in-javascript/728694#728694">How do I correctly clone a JavaScript object?</a>

blocks|key|250867|text|您可以像这样使用jQuery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|250868|var+myObjTwo+=+jQuery.extend(true,+{},+myObjOne);|code-block|syntax|javascript|250869|第一个参数表明我们想要制作一个myObjOne的深度副本。|offset|length|style|CODE|250870|entityMap^0|0|0|F|8|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You can use jQuery like so:

<pre><code>var myObjTwo = jQuery.extend(true, {}, myObjOne);
</code></pre>

The first argument indicates that we want to make a deep copy of <code>myObjOne</code>.

blocks|key|249069|text|这不是你克隆的方式，那仅仅是在一个额外的变量中存储相同的原始对象。也许this+answer会帮你|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|249070|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/728360/copying-an-object-in-javascript^0|Z|B|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

That is not how you clone, that is simply storing the same original object in an extra variable. Maybe <a href="https://stackoverflow.com/questions/728360/copying-an-object-in-javascript">this answer</a> will help you

blocks|key|2928162|text|关于如何不仅复制对象和它的属性，而且复制它的属性引用的所有对象，还有很多建议。下面是一个版本，它克隆对象而不复制它，因此克隆继承了以后添加的所有属性，除了那些由克隆自己的属性隐藏的属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2928163|var+cloneOf+=+(function()+{
++function+F(){}
++return+function(o)+{
++++F.prototype+=+o;
++++return+new+F();
++}
}());|code-block|syntax|javascript|2928164|有些人可能会认出这种模式。举个例子：|2928165|var+base+=+{foo:'foo',+bar:'bar'};
var+baseClone+=+cloneOf(base);
alert(baseClone.foo);++//+foo|2928166|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Lots of advice on how to make a copy not only of the object and it's properties, but of all the objects referenced by its properties. Here's a version that clones the object without copying it and so that the clone inherits all properties added later except for those shadowed by own properties of the clone:

<pre><code>var cloneOf = (function() {
 function F(){}
 return function(o) {
 F.prototype = o;
 return new F();
 }
}());
</code></pre>

Some may recognise the pattern. An example:

<pre><code>var base = {foo:'foo', bar:'bar'};
var baseClone = cloneOf(base);
alert(baseClone.foo); // foo
</code></pre>

blocks|key|2928208|text|你可以使用Object.assign()，但要注意浏览器的支持。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2928209|更多信息在这里：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign。|2928210|示例：|2928211|myObjTwo+=+Object.assign({},+myObjOne);|code-block|syntax|javascript|2928212|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign^0|5|F|0|8|2M|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|H|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|14|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

You can use <code>Object.assign()</code> but be aware of browser support.

More info here: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign</a>.

Example:

<pre><code>myObjTwo = Object.assign({}, myObjOne);
</code></pre>

blocks|key|249119|text|您的代码行myObjTwo+=+myObjOne不会克隆myObjOne，它只是创建了对同一对象的重复引用！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|249120|实际的答案是使用克隆函数，可能是从诸如underscore.js之类的库中。但实际上，看起来你需要阅读和学习Javascript中的对象和指针的概念。|249121|entityMap|0|LINK|mutability|MUTABLE|url|http://documentcloud.github.com/underscore/#clone^0|5|J|S|8|0|J|D|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

Your line <code>myObjTwo = myObjOne</code> does not clone <code>myObjOne</code>, it just creates a duplicate reference to the same object!

The actual answer is to use a clone function, perhaps from a library such as <a href="http://documentcloud.github.com/underscore/#clone" rel="nofollow">underscore.js</a>. But really, it looks like you have some reading and learning to do about the concept of objects and pointers in Javascript.

blocks|key|2928172|text|很简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2928173|var+clone=function(o){
++++++var+n=+{}.toString.apply(o)=="[object+Array]"+?+[]:{};
++++++for(i+in+o)
+++++++++n[i]=+typeof+o[i]=='object'+?+clone(o[i]):o[i];
++++++return+n;
+};|code-block|syntax|javascript|2928174|用法：|2928175|var+x={a:{d:34},b:33};
var+y=clone(x);++//+clones+'x'|2928176|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Simple.

<pre><code>var clone=function(o){
 var n= {}.toString.apply(o)=="[object Array]" ? []:{};
 for(i in o)
 n[i]= typeof o[i]=='object' ? clone(o[i]):o[i];
 return n;
 };
</code></pre>

Usage:

<pre><code>var x={a:{d:34},b:33};
var y=clone(x); // clones 'x'
</code></pre>

blocks|key|3142649|text|对于ES6，请使用扩展运算符。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3142650|myObjTwo+=+{...myObjOne}|code-block|syntax|javascript|3142651|es6中的扩展运算符只是一个省略号。即使原始文件被销毁，它也会创建原始文件的副本|3142652|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

With ES6, use the spread operator.

<pre><code>myObjTwo = {...myObjOne}
</code></pre>

The spread operator in es6 is just an ellipsis.
It creates a copy of the original, even if the original is destroyed

I am confused. I create a copy from <code>myObjOne</code>, than i delete an entry from <code>myObjOne</code> and JS delete the entry in my copy(<code>myObjTwo</code>) too? But why?

<pre><code> myObjOne = {};
 myObjOne['name'] = 'xxx';
 myObjOne['id'] = 'yyy';
 myObjOne['plz'] = 'zzz'; 

 // clone
 myObjTwo = myObjOne;

 // remove something
 delete myObjOne['name'];

 console.dir(myObjTwo);
</code></pre>

example
<a href="http://jsbin.com/itixes/edit#javascript,html">http://jsbin.com/itixes/edit#javascript,html</a>

Javascript - How to clone an object?

jQuery

JSON

我很困惑。我从myObjOne创建一个副本，然后我从myObjOne中删除一个条目，JS也在我的副本(myObjTwo)中删除该条目？但是为什么呢？  myObjOne = {};  myObjOne['name'] = 'xxx';  myObjOne['id'] = 'yyy';  myObjOne['plz'] = 'zzz';    // clone  myObjTwo = myObjOn

问Javascript -如何克隆对象？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript -如何克隆对象？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript -如何克隆对象？
EN