Js浅拷贝以及深拷贝

浅拷贝的实现原理:
浅拷贝只会复制对象的指针,而不是复制对象本身,指针指向同一内存,新旧对象还是共享同一块内存,
所以当复制一份过来,如 var obj2 = obj1;改变obj2的里面的属性,obj1也会随着改变。
如图:


Js浅拷贝以及深拷贝_第1张图片
13253432-aca35e0020358b3d.jpg

下面来个例子:


深拷贝:它会创造出一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象
下面来个例子:

//创建一个对象
var obj = {
    name:"小明",
    age:"12",
    skill:function(){
        console.log("123")
    },
   arr:["1","2","3"]
}

方式一:缺点:不能复制函数
var   objStr = JSON.stringify(obj);//先将对象转为字符串
var newObj = JSON. parse(objStr);//再将转的字符串转为obj对象
console.log(newObj);

运行结果如下:


3e5577b2f615b1e58460f1cfc118d82.png

从运行结果的到,通过JSON.stringify(),与JSON.parse()进行深拷贝,不能复制方法。

方式二
//创建一个对象
var obj = {
    name:"小明",
    age:"12",
    skill:function(){
       console.log("123")
    },
   arr:["1","2","3"]
}
//首先创建一个空的对象,来装复制出来的对象
var newObj = {};
    function deepcopy(obj,newObj){
         for(var i  in  obj){  //for...in遍历对象 i为键名
          if (typeof obj[i]==="object"){//判断这个属性是否对象 ===
             //判断这个obj[i]为数组还是对象
             newObj[i] = Array.isArray(obj[i])?[] :{};//newObj.arr = [] || {}   ,如果是数组或者对象,再创建一个空的数组或者对象装里面的元素或者键值对,
             deepcopy(obj[i],newObj[i]);//然后再调用函数自己,用递归把数组或者数组中的每一个元素遍历出来
         }else{
           // newObj.name=小明
            newObj[i] = obj[i];//把原对象的键值对复制给新对象
          }
      }
     return newObj ;
   }
   var res = deepcopy(obj,newObj);//调用函数
   console.log(res);

   res.skill = function(){//改变新对象的方法,原对象方法不会随着改变
    console.log("9999");
   }
  obj.skill();
  res.skill();
  res.arr[0] = "888";//改变新对象的属性,原对象属性不会随着改变
  console.log(obj.arr);
  console.log(res.arr);

var res = deepCopy(obj,newObj);//调用函数
console.log(res);
结果如图:


Js浅拷贝以及深拷贝_第2张图片
eb830c4d8ef09cf322fdfc1cd47acfe.png

你可能感兴趣的:(Js浅拷贝以及深拷贝)