对象深浅拷贝的四种方法

对象深浅拷贝的四种方法

存在这么一个对象，对他进行深拷贝

    var obj = {
      name: '法外狂徒张三',
      age: 24, 
      say() {
        console.log('鱼跃此时海');
      }
    };

浅拷贝 ：仅仅是指针给了另一个对象

    var obj = {
      name: '法外狂徒张三',
      age: 24, 
      say() {
        console.log('鱼跃此时海');
      }
    };
    var obj1 = obj;
    obj1.name = '热心市民王先生';
    //此时，我们对obj1进行改变，查看obj、obj1
    console.log(obj)// { name: '热心市民王先生',age: 24, say(){console.log('鱼跃此时海')}}
    console.log(obj1)// { name: '热心市民王先生',age: 24, say(){console.log('鱼跃此时海')}}

我们可以发现，原来的obj的name也被改变了，这就是浅拷贝

深拷贝

1、通过json实现,会造成方法丢失

    var obj = {
      name: '法外狂徒张三',
      age: 24, 
      say() {
        console.log('鱼跃此时海');
      }
    };
    var obj1 = JSON.stringify(obj);
    obj1 = JSON.parse(obj1);
    obj1.name = '热心市民王先生'
    console.log(obj1);// { name: '热心市民王先生',age: 24}
    console.log(obj)// { name: '法外狂徒张三',age: 24, say(){console.log('鱼跃此时海')}}

我们可以发现，json方法，没有改变obj原对象，但是，方法没有被继承

2、通过for-in遍历循环,实现

    var obj = {
      name: '法外狂徒张三',
      age: 24, 
      say() {
        console.log('鱼跃此时海');
      }
    };
    var obj2 = {};
    for (var attr in obj) {
      obj2[attr] = obj[attr]
    }
    obj2.name = '热心市民王先生'
    console.log(obj2);// { name: '热心市民王先生',age: 24,say(){console.log('鱼跃此时海')}}
    console.log(obj)// { name: '法外狂徒张三',age: 24, say(){console.log('鱼跃此时海')}}

通过for-in遍历循环，新的obj2改变，obj原对象没有被改变，方法被继承

3、通过Object.assign()

    var obj = {
      name: '法外狂徒张三',
      age: 24, 
      say() {
        console.log('鱼跃此时海');
      }
    };
    var obj3 = {};
    Object.assign(obj1, obj);
    obj3.name = '热心市民王先生'
    console.log(obj3);// { name: '热心市民王先生',age: 24,say(){console.log('鱼跃此时海')}}
    console.log(obj)// { name: '法外狂徒张三',age: 24, say(){console.log('鱼跃此时海')}}

通过Object.assign()，新的obj3改变，obj原对象没有被改变，方法被继承

4、通过…语法继承

    var obj = {
      name: '法外狂徒张三',
      age: 24, 
      say() {
        console.log('鱼跃此时海');
      }
    };
    var obj4 = {};
    obj4={...obj}
    obj4.name = '热心市民王先生'
    console.log(obj4);// { name: '热心市民王先生',age: 24,say(){console.log('鱼跃此时海')}}
    console.log(obj)// { name: '法外狂徒张三',age: 24, say(){console.log('鱼跃此时海')}}

通过…语法,新的obj4改变，obj原对象没有被改变，方法被继承