浅拷贝和深拷贝

一、浅拷贝

1、浅拷贝和赋值的区别

    赋值：当我们把一个对象赋值给一个新变量时，赋的其实是这个对象在栈中的地址，而不是堆中的数据，也就是两个对象指向的是同一个存储空间。无论哪个对象发生改变，其实都是改变的存储空间的内容。因此两个对象是联动的。

    

var person = {
   name:'一个字',
   hobby:['学习',['看电影','打游戏'],'购物']
}
var person1 = person;

person1.name = '张三';

person1.hobby[0] = '玩耍';

console.log(person);
console.log(person1);

// person 和person1 一样都是 {name:'张三',hobby:['玩耍',['看电影','打游戏'],'购物']}

    浅拷贝：重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用数据类型因共享同一块内存，会相互影响。

var person = {
   name:'一个字',
   hobby:['学习',['看电影','打游戏'],'购物']
}
function shallowCopy(obj){
  var target = {};
  for(var i in obj){
    if(obj.hasOwnProperty(i)){
        target[i] = obj[i]
    }
  }
  return target;
}
var person1 = shallowCopy(person);
person1.name = '张三';
person1.hobby[0] = '玩耍';
console.log(person);   // {name:'一个字',hobby:['玩耍',['看电影','打游戏'],'购物']}
console.log(person1); //{name:'张三',hobby:['玩耍',['看电影','打游戏'],'购物']}

  Object.assign()

   ...

   concat

二、深拷贝

    深拷贝：从堆内存中开辟一个新的区域存放新对象，对对象中的子对象进行递归拷贝，拷贝前后两个对象互不影响。

var person = {
   name:'一个字',
   hobby:['学习',['看电影','打游戏'],'购物']
}

function deepClone(obj){
  var cloneObj = {};
  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 person1 = deepClone(person);
person1.name = '张三';
person1.hobby[0] = '玩耍';
console.log(person); //{name:'一个字',hobby:['学习',['看电影','打游戏'],'购物']}
console.log(person1); // {name:'张三',hobby:['玩耍',['看电影','打游戏'],'购物']}

    JSON.parse(JSON.stringify()) 也可以实现深拷贝，但有缺点，当被拷贝的对象中有正则表达式类型或者函数类型时，会出错。

var person = {
   name:'一个字',
   hobby:['学习',['看电影','打游戏'],'购物'],
   date: new RegExp('\\w+'),
   function(){}
}

var person1 = JSON.parse(JSON.stringify(person));
person1.name = '张三';
person1.hobby[0] = '玩耍';
console.log(person); //{name:'一个字',hobby:['学习',['看电影','打游戏'],'购物'],date:/\w+/,function:f()}
console.log(person1); // {name:'张三',hobby:['玩耍',['看电影','打游戏'],'购物'],date:{}}

    $.extend()