entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://lodash.com/docs/4.17.4#clone|blocks|key|cs5tk|text|const+clone+=+Object.assign(+{},+instanceOfBlah+);
Object.setPrototypeOf(+clone,+Blah.prototype+);|code-block|depth|inlineStyleRanges|entityRanges|syntax|javascript|bllo0|请注意Object.assign：它进行浅层复制，不复制类方法。|unstyled|c62v1|如果您想要一个深度副本或对副本有更多的控制，那么有|9lj11|lodash+clone+functions.|offset|length^0|0|0|0|0|M|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|T|G|@]|H|@]|6|$I|J]]|$A|K|C|L|2|M|F|U|G|@]|H|@]|6|$]]|$A|N|C|O|2|M|F|V|G|@]|H|@]|6|$]]|$A|P|C|Q|2|M|F|W|G|@]|H|@$R|X|S|Y|A|Z]]|6|$]]]]

<pre><code>const clone = Object.assign( {}, instanceOfBlah );
Object.setPrototypeOf( clone, Blah.prototype );
</code></pre>

Note the characteristics of <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign" rel="noreferrer">Object.assign</a>: it does a shallow copy and does not copy class methods.

If you want a deep copy or more control over the copy then there are the <a href="https://lodash.com/docs/4.17.4#clone" rel="noreferrer">lodash clone functions</a>.

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign|blocks|key|565jq|text|这很复杂，我试了很多！最后，这一行代码适用于我的自定义ES6类实例：|unstyled|depth|inlineStyleRanges|entityRanges|432g6|let+clone+=+Object.assign(Object.create(Object.getPrototypeOf(orig)),+orig)|code-block|syntax|javascript|5s2it|它避免了设置原型，因为他们说它大大降低了代码的速度。|j7tj|它支持符号，但不适合getter/setter，并且不能处理不可枚举的属性(请参见Object.assign()+docs)。此外，克隆基本内部类(如数组、日期、RegExp、映射等)可悲的是，似乎常常需要一些单独的处理。|offset|length|style|UNDERLINE|3c3ba|结论:它是一团糟。让我们希望有一天会有一个原生的和干净的克隆功能。^0|0|0|0|15|K|15|K|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|X|G|@]|H|@]|6|$]]|$A|I|C|J|2|K|F|Y|G|@]|H|@]|6|$L|M]]|$A|N|C|O|2|E|F|Z|G|@]|H|@]|6|$]]|$A|P|C|Q|2|E|F|10|G|@$R|11|S|12|T|U]]|H|@$R|13|S|14|A|15]]|6|$]]|$A|V|C|W|2|E|F|16|G|@]|H|@]|6|$]]]]

It is complicated; I tried a lot! In the end, this one-liner worked for my custom ES6 class instances:
<pre><code>let clone = Object.assign(Object.create(Object.getPrototypeOf(orig)), orig)
</code></pre>
It avoids setting the prototype because <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf" rel="noreferrer">they say</a> it slows down the code a lot.
It supports symbols but isn't perfect for getters/setters and isn't working with non-enumerable properties (see <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign" rel="noreferrer">Object.assign() docs</a>). Also, cloning basic internal classes (like Array, Date, RegExp, Map, etc.) sadly often seems to need some individual handling.
Conclusion: It is a mess. Let's hope that there will one day be a native and clean clone functionality.

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://stackoverflow.com/questions/14034180/why-is-extending-native-objects-a-bad-practice|blocks|key|91jm7|text|TLDR；|unstyled|depth|inlineStyleRanges|entityRanges|d4ni3|//+Use+this+approach
//Method+1+-+clone+will+inherit+the+prototype+methods+of+the+original.
++++let+cloneWithPrototype+=+Object.assign(Object.create(Object.getPrototypeOf(original)),+original);|code-block|syntax|javascript|7d1jj|在Javascript中，不建议对原型进行扩展，这会导致在对代码/组件进行测试时出现问题。单元测试框架不会自动假定您的原型扩展。所以这不是一个好的做法。这里有更多关于原型扩展的解释|bk2gk|Why+is+extending+native+objects+a+bad+practice?在JavaScript中克隆对象没有一种简单直接的方法。这是第一个使用“浅拷贝”的实例：|offset|length|6sip9|1个->浅克隆：|2dhhn|class+Employee+{
++++constructor(first,+last,+street)+{
++++++++this.firstName+=+first;
++++++++this.lastName+=+last;
++++++++this.address+=+{+street:+street+};
++++}

++++logFullName()+{
++++++++console.log(this.firstName+%2B+'+'+%2B+this.lastName);
++++}
}

let+original+=+new+Employee('Cassio',+'Seffrin',+'Street+A,+23');

//Method+1+-+clone+will+inherit+the+prototype+methods+of+the+original.
let+cloneWithPrototype+=+Object.assign(Object.create(Object.getPrototypeOf(original)),+original);+

//Method+2+-+object.assing()+will+not+clone+the+Prototype.
let+cloneWithoutPrototype+=++Object.assign({},original);+

//Method+3+-+the+same+of+object+assign+but+shorter+syntax+using+"spread+operator"
let+clone3+=+{+...original+};+

//tests
cloneWithoutPrototype.firstName+=+'John';
cloneWithoutPrototype.address.street+=+'Street+B,+99';+//will+not+be+cloned|1t3o6|结果：|er6or|original.logFullName()；|5b6ac|结果:凯西奥·塞弗林|c23nl|cloneWithPrototype.logFullName()；|arhqa|8ac5m|original.address.street；|2pba8|结果：'Street+B，99‘//注意原始子对象已更改|lj7o|hj3d|注意:如果实例将闭包作为自己的属性，则此方法不会包装它。(|fc0gv|阅读有关闭包的更多信息)，另外，子对象"address“不会被克隆。|itqn|cloneWithoutPrototype.logFullName()|3d4d7|eeu06|不会起作用。克隆不会继承原始方法的任何原型方法。|amccr|cloneWithPrototype.logFullName()|5j6g4|5p368|将会工作，因为克隆也会复制它的原型。|dpk2d|要使用Object.assign克隆阵列，请执行以下操作：|1escu|let+cloneArr+=+array.map((a)+=>+Object.assign({},+a));|97ens|使用ECMAScript扩展sintax克隆数组：|a5o8v|let+cloneArrSpread+=+array.map((a)+=>+({+...a+}));|8hdva|2+->深度克隆：|5ns3p|要存档一个全新的对象引用，我们可以使用JSON.stringify()将原始对象解析为字符串，然后将其解析回JSON.parse()。|nm22|let+deepClone+=+JSON.parse(JSON.stringify(original));|duec9|使用深度克隆时，将保留对地址的引用。但是，deepClone原型将丢失，因此deepClone.logFullName()将不起作用。|c5ma1|3+->第三方库：|92ihv|另一种选择是使用第三方库，如loadash或下划线。它们将创建一个新对象，并将每个值从原始对象复制到新对象，将其引用保留在内存中。|eqvfs|下划线:让cloneUnderscore+=_(原始).clone()；|emu4u|加载克隆:+var+cloneLodash+=_.cloneDeep(原件)；|6qant|lodash或下划线的缺点是需要在项目中包含一些额外的库。然而，它们是很好的选择，也会产生高性能的结果。^0|0|0|0|0|1B|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|2F|G|@]|H|@]|6|$]]|$A|I|C|J|2|K|F|2G|G|@]|H|@]|6|$L|M]]|$A|N|C|O|2|E|F|2H|G|@]|H|@]|6|$]]|$A|P|C|Q|2|E|F|2I|G|@]|H|@$R|2J|S|2K|A|2L]]|6|$]]|$A|T|C|U|2|E|F|2M|G|@]|H|@]|6|$]]|$A|V|C|W|2|K|F|2N|G|@]|H|@]|6|$L|M]]|$A|X|C|Y|2|E|F|2O|G|@]|H|@]|6|$]]|$A|Z|C|10|2|E|F|2P|G|@]|H|@]|6|$]]|$A|11|C|12|2|E|F|2Q|G|@]|H|@]|6|$]]|$A|13|C|14|2|E|F|2R|G|@]|H|@]|6|$]]|$A|15|C|12|2|E|F|2S|G|@]|H|@]|6|$]]|$A|16|C|17|2|E|F|2T|G|@]|H|@]|6|$]]|$A|18|C|19|2|E|F|2U|G|@]|H|@]|6|$]]|$A|1A|C|-4|2|E|F|2V|G|@]|H|@]|6|$]]|$A|1B|C|1C|2|E|F|2W|G|@]|H|@]|6|$]]|$A|1D|C|1E|2|E|F|2X|G|@]|H|@]|6|$]]|$A|1F|C|1G|2|E|F|2Y|G|@]|H|@]|6|$]]|$A|1H|C|-4|2|E|F|2Z|G|@]|H|@]|6|$]]|$A|1I|C|1J|2|E|F|30|G|@]|H|@]|6|$]]|$A|1K|C|1L|2|E|F|31|G|@]|H|@]|6|$]]|$A|1M|C|-4|2|E|F|32|G|@]|H|@]|6|$]]|$A|1N|C|1O|2|E|F|33|G|@]|H|@]|6|$]]|$A|1P|C|1Q|2|E|F|34|G|@]|H|@]|6|$]]|$A|1R|C|1S|2|K|F|35|G|@]|H|@]|6|$L|M]]|$A|1T|C|1U|2|E|F|36|G|@]|H|@]|6|$]]|$A|1V|C|1W|2|K|F|37|G|@]|H|@]|6|$L|M]]|$A|1X|C|1Y|2|E|F|38|G|@]|H|@]|6|$]]|$A|1Z|C|20|2|E|F|39|G|@]|H|@]|6|$]]|$A|21|C|22|2|K|F|3A|G|@]|H|@]|6|$L|M]]|$A|23|C|24|2|E|F|3B|G|@]|H|@]|6|$]]|$A|25|C|26|2|E|F|3C|G|@]|H|@]|6|$]]|$A|27|C|28|2|E|F|3D|G|@]|H|@]|6|$]]|$A|29|C|2A|2|E|F|3E|G|@]|H|@]|6|$]]|$A|2B|C|2C|2|E|F|3F|G|@]|H|@]|6|$]]|$A|2D|C|2E|2|E|F|3G|G|@]|H|@]|6|$]]]]

TLDR;
<pre><code>// Use this approach
//Method 1 - clone will inherit the prototype methods of the original.
 let cloneWithPrototype = Object.assign(Object.create(Object.getPrototypeOf(original)), original); 
</code></pre>
In Javascript it's not recommended to make extensions of the Prototype, It will result in issues when you will make tests on your code/components. The unit test frameworks will not assume automatically yours prototype extensions. So it isn't a good practice.
There are more explanations of prototype extensions here <a href="https://stackoverflow.com/questions/14034180/why-is-extending-native-objects-a-bad-practice">Why is extending native objects a bad practice?</a>
To clone objects in JavaScript there is not a simple or straightforward way. Here is an the first instance using &quot;Shallow Copy&quot;:
1 -&gt; Shallow clone:
<pre><code>class Employee {
 constructor(first, last, street) {
 this.firstName = first;
 this.lastName = last;
 this.address = { street: street };
 }

 logFullName() {
 console.log(this.firstName + ' ' + this.lastName);
 }
}

let original = new Employee('Cassio', 'Seffrin', 'Street A, 23');

//Method 1 - clone will inherit the prototype methods of the original.
let cloneWithPrototype = Object.assign(Object.create(Object.getPrototypeOf(original)), original); 

//Method 2 - object.assing() will not clone the Prototype.
let cloneWithoutPrototype = Object.assign({},original); 

//Method 3 - the same of object assign but shorter syntax using &quot;spread operator&quot;
let clone3 = { ...original }; 

//tests
cloneWithoutPrototype.firstName = 'John';
cloneWithoutPrototype.address.street = 'Street B, 99'; //will not be cloned
</code></pre>
Results:
<blockquote>
original.logFullName();
result: Cassio Seffrin
cloneWithPrototype.logFullName();
result: Cassio Seffrin
original.address.street;
result: 'Street B, 99' // notice that original sub object was changed
</blockquote>
Notice: If the instance has closures as own properties this method will not wrap it. (<a href="https://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1">read more about closures</a>) And plus, the sub object &quot;address&quot; will not get cloned.
<blockquote>
cloneWithoutPrototype.logFullName()
</blockquote>
Will not work. The clone won't inherit any of the prototype methods of the original.
<blockquote>
cloneWithPrototype.logFullName()
</blockquote>
will work, because the clone will also copy its Prototypes.
To clone arrays with Object.assign:
<pre><code>let cloneArr = array.map((a) =&gt; Object.assign({}, a));
</code></pre>
Clone array using ECMAScript spread sintax:
<pre><code>let cloneArrSpread = array.map((a) =&gt; ({ ...a }));
</code></pre>
2 -&gt; Deep Clone:
To archive a completely new object reference we can use JSON.stringify() to parse the original object as string and after parse it back to JSON.parse().
<pre><code>let deepClone = JSON.parse(JSON.stringify(original));
</code></pre>
With deep clone the references to address will be keeped. However the deepClone Prototypes will be losed, therefore the deepClone.logFullName() will not work.
3 -&gt; 3th party libraries:
Another options will be use 3th party libraries like loadash or underscore.
They will creates a new object and copies each value from the original to the new object keeping its references in memory.
Underscore:
let cloneUnderscore = _(original).clone();
Loadash clone:
var cloneLodash = _.cloneDeep(original);
The downside of lodash or underscore were the need to include some extra libraries in your project. However they are good options and also produces high performance results.

entityMap|blocks|key|grvl|text|可以使用扩散操作符，例如，如果要克隆名为Obj的对象：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ou0e|let+clone+=+{+...obj};|code-block|syntax|javascript|40n2u|如果您想要对克隆对象进行更改或添加任何内容，请执行以下操作：|c5r12|let+clone+=+{+...obj,+change:+"something"+};^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|O|9|@]|A|@]|B|$F|G]]]]

You can use spread operator, for instance if you want to clone an object named Obj:

<pre><code>let clone = { ...obj};
</code></pre>

And if you want to change or add anything to the cloned object:

<pre><code>let clone = { ...obj, change: "something" };
</code></pre>

entityMap|blocks|key|5p3n3|text|另一个线条：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|eqs5o|大多数时候...(适用于Date，RegExp，Map，String，Number，Array)，顺便说一句，克隆字符串，number有点可笑。|pd3l|let+clone+=+new+obj.constructor(...[obj].flat())|code-block|syntax|javascript|5bk8n|对于那些没有复制构造函数的类：|64hb4|let+clone+=+Object.assign(new+obj.constructor(...[obj].flat()),+obj)^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|P|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|Q|9|@]|A|@]|B|$]]|$2|L|4|M|6|G|8|R|9|@]|A|@]|B|$H|I]]]]

Another one liner:
Most of the time...(works for Date, RegExp, Map, String, Number, Array), btw, cloning string, number is a bit funny.
<pre><code>let clone = new obj.constructor(...[obj].flat())
</code></pre>
for those class without copy constructor:
<pre><code>let clone = Object.assign(new obj.constructor(...[obj].flat()), obj)
</code></pre>

entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/actteam/bae28ef53ee4521ccbd6d925ef1bdb5f.png|imageAlt|blocks|key|610fn|text|class+A+{
++constructor()+{
++++this.x+=+1;
++}

++y()+{
++++return+1;
++}
}

const+a+=+new+A();

const+output+=+Object.getOwnPropertyNames(Object.getPrototypeOf(a)).concat(Object.getOwnPropertyNames(a)).reduce((accumulator,+currentValue,+currentIndex,+array)+=>+{
++accumulator[currentValue]+=+a[currentValue];
++return+accumulator;
},+{});|code-block|depth|inlineStyleRanges|entityRanges|syntax|javascript|afrnt|​|unstyled|bcdek|aqodn|?|atomic|offset|length|ai221|5kb8s^0|0|0|0|0|1|0|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]]|A|@$B|C|D|E|2|F|G|W|H|@]|I|@]|6|$J|K]]|$B|L|D|M|2|N|G|X|H|@]|I|@]|6|$]]|$B|O|D|-4|2|N|G|Y|H|@]|I|@]|6|$]]|$B|P|D|Q|2|R|G|Z|H|@]|I|@$S|10|T|11|B|12]]|6|$]]|$B|U|D|-4|2|N|G|13|H|@]|I|@]|6|$]]|$B|V|D|M|2|N|G|14|H|@]|I|@]|6|$]]]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>class A {
 constructor() {
 this.x = 1;
 }

 y() {
 return 1;
 }
}

const a = new A();

const output = Object.getOwnPropertyNames(Object.getPrototypeOf(a))
 .concat(Object.getOwnPropertyNames(a))
 .reduce((accumulator, currentValue, currentIndex, array) =&gt; {
 accumulator[currentValue] = a[currentValue];
 return accumulator;
 }, {});
 
console.log(output);</code></pre>
</div>
</div>

<a href="https://i.stack.imgur.com/gunSH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gunSH.png" alt="enter image description here" /></a>

entityMap|blocks|key|8mmuk|text|我喜欢几乎所有的答案。我遇到了这个问题，为了解决它，我将通过定义一个clone()方法，在其中，我将从头开始构建整个对象。对我来说，这是有意义的，因为产生的对象自然会与克隆对象具有相同的类型。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2kj9i|typescript示例：|6uutj|export+default+class+ClassName+{
++++private+name:+string;
++++private+anotherVariable:+string;
+++
++++constructor(name:+string,+anotherVariable:+string)+{
++++++++this.name+=+name;
++++++++this.anotherVariable+=+anotherVariable;
++++}

++++public+clone():+ClassName+{
++++++++return+new+ClassName(this.name,+this.anotherVariable);
++++}
}|code-block|syntax|javascript|6juut|我喜欢这个解决方案，因为它看起来更像是“面向对象的”。^0|Y|7|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@$A|Q|B|R|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|S|9|@]|E|@]|F|$]]|$2|I|4|J|6|K|8|T|9|@]|E|@]|F|$L|M]]|$2|N|4|O|6|7|8|U|9|@]|E|@]|F|$]]]]

I like almost all the answers. I had this problem and to resolve it I would do it manually by defining a <code>clone()</code> method and inside it, I would build the whole object from scratch. For me, this makes sense because the resulted object will be naturally of the same type as the cloned object.
Example with typescript:
<pre class="lang-js prettyprint-override"><code>export default class ClassName {
 private name: string;
 private anotherVariable: string;
 
 constructor(name: string, anotherVariable: string) {
 this.name = name;
 this.anotherVariable = anotherVariable;
 }

 public clone(): ClassName {
 return new ClassName(this.name, this.anotherVariable);
 }
}
</code></pre>
I like this solution because it looks more 'Object Oriented'y

entityMap|blocks|key|33cge|text|使用与原始对象相同的原型和属性创建对象的副本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2rk1g|function+clone(obj)+{
++return+Object.create(Object.getPrototypeOf(obj),+Object.getOwnPropertyDescriptors(obj))
}|code-block|syntax|javascript|6q4om|使用不可枚举的属性、getter、setter等。无法克隆内部插槽，这是许多内置javascript类型都有的(例如，Array、Map、Proxy)^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|K|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|L|9|@]|A|@]|B|$]]]]

Create the copy of the object using the same prototype and the same properties as the original object.
<pre class="lang-js prettyprint-override"><code>function clone(obj) {
 return Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj))
}
</code></pre>
Works with non-enumerable properties, getters, setters, etc. Is unable to clone internal slots, which many built-in javascript types have (e.g. Array, Map, Proxy)

How do I clone a Javascript class instance using ES6.

I'm not interested in solutions based on jquery or $extend.

I've seen quite old discussions of object cloning that suggest that the problem is quite complicated, but with ES6 a very simple solution presents itself - I will put it below and see if people think it is satisfactory.

edit: it is being suggested that my question is a duplicate; I saw that answer but it is 7 years old and involves very complicated answers using pre-ES6 js. I'm suggesting that my question, which allows for ES6, has a dramatically simpler solution.

How to clone a javascript ES6 class instance

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

 如何使用ES6克隆Javascript类实例。 我对基于jquery或$extend的解决方案不感兴趣。 我看到过关于对象克隆的古老讨论，这些讨论表明这个问题相当复杂，但对于ES6，一个非常简单的解决方案出现了-我将把它放在下面，看看人们是否认为它是令人满意的。 编辑:有人建议我的问题是重复的；我看到了那个答案，但它...

问如何克隆javascript ES6类实例
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何克隆javascript ES6类实例EN