深拷贝和浅拷贝

2018-06-12  本文已影响0人  前端girl吖

B复制A,A改变,B改变则为浅拷贝,不改变为深拷贝

基本类型 名值存储在栈内存中 -- 深拷贝

简单的来说就是,在有指针的情况下,浅拷贝只是增加了一个指针指向已经存在的内存,而深拷贝就是增加一个指针并且申请一个新的内存,使这个增加的指针指向这个新的内存,采用深拷贝的情况下,释放内存的时候就不会出现在浅拷贝时重复释放同一内存的错误!
在js中,对于非基本类型数据(普通对象或数组),浅拷贝只是拷贝了内存地址,子类属性指向父类属性的内存地址,而子类修改后父类也会被修改

基本类型复制.png

引用数据类型 名存储在栈内存中,值存在堆内存中 栈内存会提供一个引用的地址指向堆内存中的值

引用数据复制.png

法一:
通过递归实现封装一个对象({}|[])深拷贝的函数 深拷贝拷贝对象各个层级的属性

  function deepClone(obj) {
      let cloneObj  =  Array.isArray(obj)?[]:{}
      if(obj && typeof obj == "object"){
         for(let key in obj) {
               if(obj[key] && typeof obj[key] === "object"){
                    cloneObj[key] = deepClone( obj[key] )
               }else {
                   cloneObj[key] = obj[key]
                }
          }
    }
    return  cloneObj;
}
let a = [1,2,3,4]
b = deepClone(a)
a[0] = 2
console.log(a,b)
===>a:[2,2,3,4]    b:[1,2,3,4]

slice()和conca方法并不是深拷贝,元素只有一级时,可以实现深拷贝,子对象里还有对象,就无法实现

  let a = [1,2,3,4]
  b = a.slice()
  a[0] = 2;
 console.log(a,b)
===>a:[2,2,3,4]    b:[1,2,3,4]

  let a = [1,2,[2,3],4]
  b = a.slice()
  a[0] = 2;
  a[2][0] = 1
 console.log(a,b)
===>a:[2,2,[1,3],4]    b:[1,2,[1,3],4]

===>拷贝不彻底,一级属性的确不受影响,但二级属性没拷贝成功,所以不是真正的深拷贝

法二:
借用JSON对象的parse和stringify

  function deepClone(obj){
    let _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
    return objClone
  }    
  let a=[0,1,[2,3],4],
  b=deepClone(a);
  a[0]=1;
  a[2][0]=1;
  console.log(a,b);

法三
借用JQ的extend方法

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

  let a=[0,1,[2,3],4],
  b=$.extend(true,[],a);
  a[0]=1;
  a[2][0]=1;
console.log(a,b);
上一篇 下一篇

猜你喜欢

热点阅读