jQuery里的浅拷贝和深拷贝

今天我们来了解一下jQuery中的浅拷贝和深拷贝。

我们今天通过案例来了解浅拷贝和深拷贝，加深理解。

在jQuery中我们想要进行对象拷贝，我们可以通过

$.extend([deep],target,object1,[objectN]);

 1、deep 如果设置为true则为深拷贝，默认为false则为浅拷贝；

2、target ：要拷贝的目标对象；

3、object1：待拷贝到第一个对象的对象；

4、objectN：待拷贝到第N个对象的对象。。

5、浅拷贝在面对复杂数据类型的时候，拷贝的就是这个复杂类型的地址。当对拷贝对象进行修改的时候，被拷贝对象的数据也会发生变化。

我们来看一下默认浅拷贝状态下的拷贝情况。

浅拷贝：

$(function(){
            var targetObj = {
                id:0
            };
            var obj = {
                id:1,
                name:'andy',
                msg:{
                    age:12
                }
            }
            console.log(targetObj);
            // console.log(obj);
            $.extend(targetObj,obj);
            console.log(targetObj);
        })

运行后的结果是：

 我们可以发现，在对象的拷贝过程中，如果有冲突的元素，拷贝的时候就会进行覆盖。在浅拷贝的定义中，完成拷贝后对拷贝完成的数据进行修改会影响原来的对象。

$(function(){
            var targetObj = {
                id:0
            };
            var obj = {
                id:1,
                name:'andy',
                msg:{
                    age:12
                }
            };
            console.log(targetObj);
            // console.log(obj);
            $.extend(targetObj,obj);
            console.log(targetObj);
            targetObj.msg.age = 20;
            console.log(obj);
        })

观察结果：

我们可以发现，它会对原来obj对象中的age数值进行修改。

究其原因，就是在浅拷贝的过程中，对于复杂数据，拷贝时会将复杂数据的地址拷贝过去。所以当拷贝对象进行数据修改的时候，本质修改的是原数据的值，所以会出现这种情况。

深拷贝：

$(function(){
            var targetObj = {
                id:0
            };
            var obj = {
                id:1,
                name:'andy',
                msg:{
                    age:12
                }
            };
            console.log(targetObj);
            // console.log(obj);
            $.extend(true,targetObj,obj);
            console.log(targetObj);
            targetObj.msg.age = 20;
            console.log(obj);
        })

观察结果： 

 

 我们会发现在深拷贝的对象中再去修改数据，被拷贝的对象就不会出现数据更改的情况，说明深拷贝就是将数据完全拷贝过去。

对于深拷贝和浅拷贝的理解就是这样的。有更好的理解方法，大家可以打在评论区。