浅谈js中的浅拷贝和深拷贝

对于字符串类型,浅复制是对值的复制,对于对象来说,浅复制是对对象地址的复制,并没有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变,而深复制则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。深复制实现代码如下(可以从两个方法进行解决):
1、通过递归解析解决
    var china = {
        nation : '中国',
        birthplaces:['北京','上海','广州'],
        skincolor :'yellow',
        friends:['sk','ls']
    }
    //深复制,要想达到深复制就需要用递归
    function deepCopy(o,c){
        var c = c || {}
        for(var i in o){
        if(typeof o[i] === 'object'){
            //要考虑深复制问题了
            if(o[i].constructor === Array){
                //这是数组
                c[i] =[]
            }else{
                //这是对象
                c[i] = {}
            }
                deepCopy(o[i],c[i])
            }else{
                c[i] = o[i]
            }
        }
           return c;
      }
    var result = {name:'result'};
    result = deepCopy(china,result);
    console.dir(result);
1、通过JSON解析解决
    var test ={
        name:{
         xing:{ 
             first:'张',
             second:'李'
         },
         ming:'老头'
       },
      age :40,
      friend :['隔壁老王','宋经纪','同事']
    }
      var result = JSON.parse(JSON.stringify(test))
      result.age = 30
      result.name.xing.first = '往'
      result.friend.push('fdagldf;ghad')
      console.dir(test)
      console.dir(result)
问:在js中如何把一个对象里的属性和方法复制给另一个对象呢?
看一段代码:
var person={name:'zhou',age:24};
var son={sex:'男'};
function clone(p,s){
  var s=s||{};//判断s对象是否存在,不存在则定义s为空对象
  for(var prop in p){
    s[prop]=p[prop];
};
    return s;//返回s对象
};
clone(person,son);

这里写图片描述

这是调用clone()返回的结果。
若var person={name:’chen’,age:18,man:{hight:188}};即person 对象里包含一个子对象man,则在复制时浅拷贝只是将子对象man的一个引用地址复制给son对象;son和person里的man 属性都指向同一个对象,故改变任何一个都能影响到另外一个。
代码如下:
<script>
    var person={name:'zhou',age:24,man:{hight:172}}
    var son={sex:'男'};
    function clone(p,s){
        var s=s||{};//判断s对象是否存在,不存在则定义s为空对象
        for(var prop in p){
            s[prop]=p[prop];
        };
            return s;//返回s对象
    };
        clone(person,son);
        son.name='prince';
        console.log(son.name);//打印prince
        console.log(person.name);//打印zhou
        son.man.height=180;
        console.log(son.man.height);//打印180
        console.log(person.man.height);//打印180
script>

这里写图片描述

深拷贝可以很好的解决引用类型的拷贝问题→采用递归的方法去复制拷贝对象,从而解决浅拷贝带来的弊端。
<script>
    var person={name:'zhou',age:24,man:{height:172}}
    var son={sex:'男'};
    function clone(p,s){
        var s=s||{};//判断s对象是否存在,不存在则定义s为空对象
        for(var prop in p){
            if (typeof p[prop]=='object') {
                s[prop]=(p[prop].constructor===Array)?[]:{};//三元运算,将s[prop]初始化为数组或者对象
                clone(p[prop],s[prop])
            } 
            else {
                s[prop]=p[prop];
            }
        };
            return s;//返回s对象
    };
        clone(person,son);
        son.name='prince';
        console.log(son.name);//打印prince
        console.log(person.name);//打印zhou
        son.man.height=180;
        console.log(son.man.height);//打印180
        console.log(person.man.height);//打印172
script>

这里写图片描述

你可能感兴趣的:(★Web前端)