JavaScript深度克隆对象

在今天的项目中，需要使用深度克隆对象，并以原型链进行编程，所以我只是心血来潮地复习了这个知识点，并在网上找到了相应的知识。

克隆一个物体，这个名词看起来很高大上，其实也没什么，就是复制一个又长又一模一样的物体可能会有初学者朋友的思维，是不是那么简单，那么容易？

var obj 1={ name : ' payen ' }；

var obj2=obj1

这不是克隆的对象；obj1和obj2完全是同一个对象。

他们指向同一个内存地址空间，得到了同一个小房子

这是因为对象是一个参考值

说到参考值

JavaScript中的引用值只是对象

这里注意，数组是特殊的对象，函数也是特殊的可执行对象，也就是说，它们也是对象。所谓深度克隆对象，就是他们不想要同一个房子，你得给我一个一模一样的房子的副本。不知道大家能不能理解这个=~~=即深度克隆对象的参考值要复制，而相对浅的克隆对象的参考值只需要带过来。

首先，让我们看一下浅层克隆对象

var house={ name: 'payen '，people: {父： true，母： true } }函数easyClone(obj){ var newObj={ }；for(var prop in obj){ if(obj . hasown property(prop)){ new obj[prop]=obj[prop]；} }返回newObj} var newHouse=easyClone(house)；不要吐我口水。我用简单的。英语怎么说“浅”我都不记得了(真不知道自己是怎么通过六级的)。这是一个小的性能问题。感兴趣的童鞋可以看我的另一篇文章

这段代码非常简单，我就不多解释了

看看chrome控制台

看起来很棒

那我现在就做一件事

给新房子添一个人

看来这个“新房”并不新鲜，不要被变量名所迷惑。因此，随着参考值的出现，浅层克隆并不容易使用

既然如此，我们该怎么办

由于我们想要获得一个新的对象，我们可以创建一个新的对象，并将旧对象的内容复制到新对象中。

还有一个问题。如果对象中有对象怎么办

然后继续重复创建和添加的过程，这显然是一个循环的过程

但是有两种循环

重复

递归

毫无疑问，递归更好

在递归循环中，当满足终止条件时，我们一层一层地返回到结束，这样我们就可以通过递归一层一层地找到引用值，直到没有引用值或者看代码

var house={ name: 'payen '，people: {父： true，母： true，子： { age: 1 } }，money: [1000，2000，3000]}函数deepClone(original，target){ var target=target | | { }；//如果目标未定义或没有传递参数，则为(var prop in original){//遍历原始对象if (original。hasown property(prop)){//只复制对象内部。不考虑原型链if(原始[prop]==' object '){//引用值if(object . prototype . tostring . call(原始[prop])=='[object array]'){ target[prop]=[]；//处理数组引用值} else { target[prop]={ }；//处理对象引用值}//可以使用三眼运算符DeepClone(原[prop]，目标[prop])；//递归克隆}else{//基本值目标[prop]=原始[prop]；} } }返回目标；} var newHouse=Deepclone(house)；上面说if-else非常适合使用三眼运算符，但是我觉得太长了。强迫症意味着非常难受。为了证明真的是深度克隆，我故意把原房子复杂化。(我们不考虑功能的深度克隆，比较麻烦，意义不大)，这次真的是新房。

我不会展开它

可以看出，新对象的参考值发生了变化，但旧对象没有变化

原型链上的编程是相同的

var house={ name: 'payen '，people : }父：真的，母：真的，子： { age: 1 } }，money: [1000，2000，3000]}对象。原型。克隆到=function(obj){ var obj=obj | | { }；for(var prop in this){ if(this。hasown属性(prop)){ if(此[prop]==' object '的类型){ if(object。原型。tostring。调用(this[prop])=='[object Array]'){ obj[prop]=[]；} else { obj[prop]={ }；}这个[道具]。克隆托（物体[道具]);} else { obj[prop]=this[prop]；} } }返回obj} var newHouse={ }新房子；感谢阅读，希望能帮到大家，谢谢大家对本站的支持！