一、浅拷贝和深拷贝

(1)基本类型

  5种基本数据类型,Number、String、Boolean、Null以及Undefined,变量是直接按值存放的,存放在栈内存中的简单数据,可以直接访问。

(2)引用类型

  存放在堆内存中的对象,变量保存的是一个指针,这个指针指向另一个位置。

  当需要访问引用类型(比如对象,数组)时,首先从栈中获得该对象的地址指针,然后再从堆内存中取得所需的数据。

浅拷贝

  如下面代码所示:

var x = {
    a:1,
    b:2
};
var y = x;
y.a = 3;
console.log(x);//{a: 3, b: 2}
console.log(y);//{a: 3, b: 2}

  这是浅拷贝,x和y指向的是同一个堆,对象复制只是复制的对象的引用

  复制的副本其实只是一个指针,两个变量指向同一个堆对象,改变其中一个变量,另一个也会受影响

深拷贝

  如下面代码所示:

var x = {
    a:1,
    b:2
};
var y = {
    a:x.a,
    b:x.b
};
y.a = 3;
console.log(x);//{a: 1, b: 2}
console.log(y);//{a: 3, b: 2}

  x对象和y对象是虽然所有的值都是一样的,但是在堆里面,对应的不是同一个了。

深拷贝和浅拷贝的示意图如下:

  浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。

   但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

 二、浅拷贝的实现方式

1.通过赋值实现

  将浅拷贝封装成一个函数,如下代码所示:

function shallowCopy (src) {
    var result = {};
    for(let prop in src){
        result[prop] = src[prop];
    }
    return result;
}
var obj = {
    a:1,
    arr:[2,3]
};
var shallowObj = shallowCopy(obj);
shallowObj.arr[1] = 5;
console.log(obj);
console.log(shallowObj);

  结果如下图所示:

2.通过Object.assign()实现

  Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。

  但是 Object.assign() 进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。

  如下面代码所示:

var x = {
    a:{
        b:1,
        c:2
    }
};
var y = Object.assign({},x);
y.a.b = 3;
console.log(x);//{a:{b:3,c:2}}
console.log(y);//{a:{b:3,c:2}}

  注意:当object只有一层的时候,是深拷贝,如下代码所示:

var x = {
    a:1,
    b:2
};
var y = Object.assign({},x);
y.a = 3;
console.log(x);//{a: 1, b: 2}
console.log(y);//{a: 3, b: 2}

三、深拷贝的实现方式

1.当对象只有一层时,通过Object.assign()实现,如上

2.JSON对象的stringify以及parse方法

  JSON.stringify方法将js对象序列化成JSON字符串,JSON.parse方法将JSON字符串反序列化为js对象。

  借助这两个方法,可以实现对象的深拷贝。

var x = {
    a:1,
    b:2
};
var y = JSON.parse(JSON.stringify(x));
y.a = 3;
console.log(x);//{a: 1, b: 2}
console.log(y);//{a: 3, b: 2}

3.jQuery 的$.extend方法

var $ = require('jquery');
var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
var obj2 = $.extend(true, {}, obj1);
console.log(obj1.b.f === obj2.b.f);// false

 4.原生js实现深拷贝

function deepCopy(obj) {
    if(obj === null){
        return obj;
    }
    //定义一个结果变量为newobj,判断结果为数组还是对象
    let newobj = Array.isArray(obj)?[]:{};
    for(let key in obj){
        //如果是对象应该深拷贝,在堆内存中开辟新的内存,递归实现,否则进行浅拷贝
        if(typeof obj[key] === 'object'){
            newobj[key] = deepCopy(obj[key]);
        }else {
            newobj[key] = obj[key];
        }
    }
    return newobj;
}
//测试数据如下
let Obj = {a:1,b:{c:2,d:3}};
let newobj = deepCopy(Obj);
newobj.a=5;
console.log(Obj);//{a:1,b:{c:2,d:3}}
console.log(newobj);//{a:5,b:{c:2,d:3}}

let arr = [1,2,3,[4,5,6]];
let newarr = deepCopy(arr);
newarr[0]=7;
console.log(arr);//[1,2,3,[4,5,6]]
console.log(newarr);//[7,2,3,[4,5,6]]