js的浅拷贝和深拷贝

Posted 2020-10-13 vivayue

前言：对象的直接量赋值其实是一种引用，对赋值后的对象修改操作会影响到原始对象值，这里的其中包括object和Array。

一、浅拷贝

浅拷贝只是复制对象的一个指针，修改复制对象属性相当于修改原始对象的属性

代码如下：

function shallowCopy(obj2) {
	var obj1 = {};
    for (var prop in obj2) {
  	    // 判断是否是自有属性
	    if (obj2.hasOwnProperty(prop)) {
	      obj1[prop] = obj2[prop];
	    }
    }
    return obj1;
}
var myobj = {
	name:"水月",
	oarr:[2,3],
	book:{date:2017},
	sayName:function(){
		alert(this.name);
	}
};
var newObj = shallowCopy(myobj);
// 修改复制的对象，原始对象也会被修改
newObj.oarr[1] = 5;
newObj.book.date = 2018;
console.log(myobj.oarr);
console.log(myobj.book.date);

　　

二、深拷贝

深拷贝，它不仅将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上

代码如下：

function deepClone(obj) {
 var o;
 if (typeof obj == "object") {
     if (obj === null) {
          o = null;
     } else {
           // 如果对象是数组
          if (obj instanceof Array) {
              o = [];
             for (var i = 0, len = obj.length; i < len; i++) {
                  // 对象的属性如果是对象继续递归
                 o.push( deepClone(obj[i]) );
             }
         } else {
             o = {};
             for (var j in obj) {
                o[j] = deepClone(obj[j]);
             }
         }
     }
 } else {
     o = obj;
 }
     return o;
};
var oldObj = {
    name:"小明",
    oarr:[1,2],
    book:{date:2027},
    sayName:function(){
        alert(this.name);
    }
};
var deepObj = deepClone(oldObj);
// 复制的对象的数组添加一个元素，不会影响到被复制对象的数组
deepObj.oarr.push(3);
console.log(oldObj.oarr);
console.log(deepObj.oarr);