深浅拷贝理解

• 浅拷贝：浅拷贝是创建一个新对象，这个对象有着原始对象属性的一份精确拷贝，如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存的地址，所以其中一个对象改变了这个地址，就会影响到另一个对象。

• 深拷贝：深拷贝是将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原对象。

• 浅拷贝 赋值的区别：

  • 赋值：当我们把一个对象赋值给一个新的变量时，赋的其实是该对象在栈中的地址，而不是堆中的数据，也就是两个对象指向同一个存储空间，无论哪个对象发生改变，其实都是改变存储空间的内容，因此两个对象是联动的。
  • 浅拷贝：重新在堆中创建内存，拷贝前后对象基本数据类型互不影响，但拷贝前后对象的引用类型因共享同一块内存，会相互影响。
  • 深拷贝：从堆内存中开辟一个新的区域存放新对象，对对象中的子对象进行递归拷贝，拷贝前后的两份对相互不影响。

var person ={
  name:'ss',
  hobby:['学习','跑步']
}
// 赋值 **无论哪个对象发生改变，都会影响另一个对象**
var person1 = person;
person1.name = 'tt';
person1.hobby[0] = '玩耍';
console.log(person);
console.log(person1)
// 浅拷贝 **拷贝前后对象基本数据类型互不影响，但拷贝前后对象的引用类型因共享同一块内存，会相互影响**
function shallowCopy(obj){
  var target = {};
  for(var i in obj){
     if(obj.hasOwnProperty(i)){
       target[i] = obj[i];
     }
  }
 return target
}
var person2 = shallowCopy(person);
person2.name = 'tt';
person2.hobby[0] = '玩耍';
console.log(person);
console.log(person2)
// 深拷贝 **对对象中的子对象进行递归拷贝，拷贝前后的两份对相互不影响**
function deepClone(obj){
  var cloneObj = new obj.constructor();
  if(obj === null) return obj;
  if(obj instanceof Date) return new Date(obj);
  if(obj instanceof RegExp) return new RegExp(obj);
  if(typeof obj !== 'object') return obj;
  for(var i in obj){
    if(obj.hasOwnProperty(i)){
       cloneObj[i] = deepClone(obj[i]);
     }
  }
  return cloneObj;
}
var person3 = deepClone(person);
person3.name = 'tt';
person3.hobby[0] = '玩耍';
console.log(person);
console.log(person3)
复制代码

实现深浅拷贝的方法

浅拷贝实现方法

(1) Object.assign()

var obj1 = {a: 1, b: 2};
var obj2 = Object.assign({}, obj1);
复制代码

[(2) 解构赋值

var obj1 = {a: 1, b: 2};
var obj2 = {...obj1};
复制代码

浅拷贝实现原理：

function shallowCopy(obj) {
  var target = {};
  for (let i in obj) {
    if (obj.hasOwnproperty(i)) {
      target[i] = obj[i];
    }
  }
  return target;
}
复制代码

深拷贝实现方法

(1) 利用 JSON.parse 和 JSON.stringfy

var obj1 = {
  name: 'li',
  hobit: ['摄影', '羽毛球']
}
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.hobit.push('游泳');
console.log(obj1); // { name: 'li', hobit: [ '摄影', '羽毛球' ] }
console.log(obj2); // { name: 'li', hobit: [ '摄影', '羽毛球', '游泳' ] }
​
复制代码

• 如果 obj 里面有时间对象，则 JSON.stringify 后再 JSON.parse 的结果，时间将只是字符串的形式。而不是时间对象；
• 如果 obj 里有 RegExp、Error 对象，则序列化的结果将只得到空对象；
• 如果 obj 里有函数，undefined，则序列化的结果会把函数或 undefined 丢失；
• 如果 obj 里有 NaN、Infinity 和-Infinity，则序列化的结果会变成 null
• JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果 obj 中的对象是有构造函数生成的， 则使用 JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的 constructor；
• 如果对象中存在循环引用的情况也无法正确实现深拷贝；

(2) 利用递归来实现

function deepCopy(obj) {
  if (obj == null)  return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  if (typeof obj !== 'object') return obj;
  let cloneObj = new obj.constructor();
  for (let i in obj) {
    if (obj.hasOwnProperty(i)) {
      cloneObj[i] = deepCopy(obj[i]);
    }
  }
  return cloneObj;
}
复制代码

(3) jQuery 的 extend

$.extend( [deep ], target, object1 [, objectN ] )
// deep ：表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝
// target： Object类型 目标对象，其他对象的成员属性将被附加到该对象上
// object1… objectN : Object类型 第一个以及第N个被合并的对象。