谈谈js中深度克隆和浅度克隆

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了谈谈js中深度克隆和浅度克隆相关的知识,希望对你有一定的参考价值。

在js中,我们通常通过var创建一个json对象来方便存储数据,

var template = {

  user:‘张某‘,

  password:‘‘,

  tem:[‘标签1‘,‘标签2‘]

}

这种方式一般作为标准数据格式。

 

我们先来讲浅度克隆

然后我们观察下面代码

function setObject(obj){
  var newObj = {};
  for(var i in obj){
    newObj[i] = obj[i]
  }
  return newObj;
}

var tem2 = setObject(template);
tem2.user="肖某";
tem2.password = "123";
tem2.tem.push(‘音乐‘);

var tem3 = setObject(template);
tem3.user="刘某";
tem3.password = "123456";
tem3.tem.push(‘体育‘);

console.log(tem2) //

  1. "标签1"
  2. 1:"标签2"
  3. 2:"音乐"
  4. 3:"体育"


console.log(tem3) //

  1. "标签1"
  2. 1:"标签2"
  3. 2:"音乐"
  4. 3:"体育"

通过打印看到tem2的tem跟tem3的tem的数组一样。

这很好理解,因为简单的复制对象,如果对象其中一个属性是引用型变量,就会出现这种情况,因为引用型变量保存的是内存地址,所以其实后来操作的都是同一块内存,导致了数组内容都一样。

 

再来看看下面这种情况

function setObject(obj,newObj){
  var newObj = newObj || {};
  for(var i in obj){
    if(typeof obj[i] == ‘object‘){
      newObj[i] = (obj[i].constructor === Array) ? [] : {}
      setObject(obj[i],newObj[i])
    }else{
      newObj[i] = obj[i]
   }
}
   return newObj;
}

var tem2 = setObject(template);
tem2.user="肖某";
tem2.password = "123";
tem2.tem.push(‘音乐‘);


var tem3 = setObject(template);
tem3.user="刘某";
tem3.password = "123456";
tem3.tem.push(‘体育‘);

console.log(tem2) //tem2.tem

       Array(3)

    1. 0:"标签1"
    2. 1:"标签2"
    3. 2:"音乐"
    4. length:3


console.log(tem3) // tem3.tem

    1.   Array(3)
    2. 0:"标签1"
    3. 1:"标签2"
    4. 2:"体育"
    5. length:3

深克隆就是在克隆的时候判断一下属性的类型是不是引用型变量,如果是的话就用递归方法让它一层一层进去复制自己。

这就是深度克隆了,其实是JS的继承的方法的一种。













































以上是关于谈谈js中深度克隆和浅度克隆的主要内容,如果未能解决你的问题,请参考以下文章

js浅度克隆/深度克隆

JavaScript的深度克隆

26.JavaScript实现对象混合与对象浅度克隆和对象的深度克隆

java中的浅克隆和深克隆是啥

JS深度拷贝

java中深克隆与浅克隆的区别