深拷贝与浅拷贝的区别

1、回顾

数据传递的方法：

    值传递：基本数据类型的数据不会发改变，因为基本数据类型一般存放在栈里面,值传递只是将数据拷贝了一份给另一个变量

    引用传递：会改变内存中的数据，因为引用类型的数据都存放在堆里面，栈里面存放的是索引，拷贝的时候是拷贝的地址也就是索引

例如：

    值传递

    var a = 10;
    var b = a;
    b+=10;
    console.log(a);//10
    console.log(b);//20;


    引用传递

    var arr = [10,20,30,40];
    var newArr = arr;
    newArr[0] = 80;
    console.log(arr);//[80,20,30,40]
    console.log(newArr);//[80,20,30,40];

    因为引用数据类型传递是保存了内存中的地址，当一个数据发生改变的时候 地址里面的数据也会发送改变

 

2、浅拷贝

浅拷贝：所谓的浅拷贝就是复制一份引用数据类型的地址，当改变了内存中数据的某一个值得话，也会影响到另一个对象

浅拷贝的方式：
   
   浅拷贝1
    var obj = {name:"张三",age:19,sex:"男"}
    var newObj = obj;

    newObj.name="李四";
    console.log(obj);//{name:"李四",age:19,sex:"男"}
    console.log(newObj);//{name:"李四",age:19,sex:"男"}


    浅拷贝2 
        Object.assgin()
        参数1：目标对象
        参数2：任意多个对象

        如果对象是多层的话
        var obj = {data:{a:1,b:2,c:3}};

        var obj1 = Object.assign({},obj);
        obj1.data.a = 10;
        console.log(obj);//{data:{a:10,b:2,c:3}}


    浅拷贝3
        封装CopyAttr()
        如果对象是多层的话
    function copyAttr(obj){
        var newObj = {};
        for(var key in obj){
            newObj[key] = obj[key];
        }
        return newObj;
    }

    var obj = {data:{a:1,b:2,c:3}};
    var newObj = copyAttr(obj);
    newObj.data.a = 10;
    console.log(obj)//{data:{a:10,b:2,c:3}}


　　浅拷贝4
        $.extend({},obj)
        var obj = {data:{a:1,b:2,c:3}};
        var newObj = $.extend({},obj);
        newObj.data.a = 10;
        console.log(obj);//{a: 10, b: 2, c: 3}
        console.log(newObj);//{a: 10, b: 2, c: 3}

3、深拷贝

深拷贝：所谓的深拷贝就是复制一份引用数据类型的数据，当改变了数据的某一个值得话，不会影响到另一个对象（注意深拷贝是拷贝的数据，而不是索引，浅拷贝拷贝的是索引而不是数据）

深拷贝1
        Object.assign();
        如果对象只有一层的
        var obj = {a:1,b:2,c:3};
        var newObj = Object.assign({},obj);
        newObj.a = 10;
        console.log(obj);//{a: 1, b: 2, c: 3}
        console.log(newObj);//{a: 10, b: 2, c: 3}


深拷贝2
        $.extend(true,{},obj)
        var obj = {a:1,b:2,c:3};
        var newObj = $.extend(true,{},obj);
        newObj.a = 10;
        console.log(obj);//{a: 1, b: 2, c: 3}
        console.log(newObj);//{a: 10, b: 2, c: 3}

深拷贝3
    JSON.stringify()
    var obj = {data:{a:1,b:2,c:3}};
    var newObj = JSON.parse(JSON.stringify(obj));
    newObj.data.a = 10;
    console.log(obj);//{a: 1, b: 2, c: 3}
    console.log(newObj);//{a: 10, b: 2, c: 3}
    缺点:没有办法将函数转换为json