JS对象深拷贝

项目开发中，我们可能会遇到这种情况：

我有一个对象，我想copy一个相同的对象出来，然后用copy的那个对象进行值的变化。

eg:

var people={
name:"John",
sex:"male"
};
var otherPeople=people;
console.log(people);
console.log(otherPeople);

运行结果：


确实是得到了一个与原始对象相同的对象。

现在，我要对我复制的对象进行值的改变，看看会有怎样的事情发生。

var people={
name:"John",
sex:"male"
};
var otherPeople=people;
console.log(people);    //这是赋值前的原始对象
otherPeople.name="Bob"; //对子对象的name属性进行重新复制
console.log(people);    //这是原始对象
console.log(otherPeople);//这是子对象

运行结果：


奇怪的事情发生了，我的原始对象的name属性明明叫”John”，为什么在我重新给子对象进行赋值时它的对应属性也变成了”Bob”！这是怎么回事？

这是因为子对象获得的只是一个内存地址，而不是真正拷贝，这个内存地址指向的是原始对象，所以，只要对子对象进行修改就相当于对原始对象进行了修改。意思就是本来就是同一个东西，只是给他换了一个名字而已。

以上操作还有一个名称，叫做：浅拷贝

怎样才能实现我想要的效果呢？

答案就是：深拷贝！

用到JS的序列化就可以实现！直接上例子！

eg：

var people={
name:"John",
sex:"male"
};
var s=JSON.stringify(people); //将people序列化并赋值给s，此时s是字符串
var o=JSON.parse(s); //将s还原成对象并赋值给o
console.log(people);
console.log(o);

运行结果:


可以看到两个对象是一样的，那如果我再给子对象重新赋值呢，原始对象会改变吗？我们试一试。

var people={
name:"John",
sex:"male"
};
var s=JSON.stringify(people); //将people序列化并赋值给s，此时s是字符串
var o=JSON.parse(s); //将s还原成对象并赋值给o
console.log(people); //原始对象
o.name="Bob";
console.log(people); //子对象赋值后的原始对象
console.log(o); //赋值后的子对象

运行结果：


可以看到，原始对象并没有改变！还是”John”，子对象已经变成了“Bob”！我们想要的效果就达到啦！！！

当然，网上还有很多方法可以实现深拷贝，但是个人感觉比较繁琐，就不多赘述了