jQuery对象拷贝

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法。

语法：$.extend([deep] , target , object1, [objectN] )

① deep：如果设为true 为深拷贝，默认为false 浅拷贝。
② target：表示需要拷贝的目标对象。
③ object1：被拷贝的第一个对象。
④ objectN：被拷贝的第N个对象。

1. 代码体验

<!-- js代码 -->
<script>
    // (1) 目标对象为空对象——-此时打印出来的结果和obj对象一模一样
    // let targetObj = {};
    // let obj = {
    //     id: 2,
    //     name: '张三',
    //     msg: {
    //         age: 18
    //     }
    // };
    // $.extend(targetObj, obj);
    // console.log(targetObj); 

    // (2) 目标对象中存在有和拷贝对象相同的属性和方法，此时打印出来的结果是：
    //  ①浅拷贝--相同属性和方法均被覆盖成obj的同名属性值和方法，即和原对象一模一样
    //  ②深拷贝--相同属性被覆盖，而复杂数据类型的内容没有同名则不覆盖，两者共存，若同名则覆盖
    let targetObj = {
        id: 1,
        msg: {
            sex: '男'
        }
    };
    let obj = {
        id: 2,
        name: '张三',
        msg: {
            age: 18
        }
    };
    // $.extend(targetObj, obj);  // 浅拷贝
    $.extend(true, targetObj, obj); // true 为深拷贝
    // (3) 若将拷贝后的目标对象进行重新赋值，则得到的结果是：
    //  ① 浅拷贝--目标对象的值肯定进行对应的改变，而原被拷贝的对象obj的属性值不会被改变，但是如果修改的是复杂数据类型的值，则也会跟着改变
    //  ② 深拷贝--不管目标对象修改什么类型的值，原对象obj的值都不会改变
    targetObj.id = 3; // 修改属性值（简单类型）
    targetObj.msg.age = 22; // 修改msg中对象的值（复杂类型）
    console.log(targetObj);
    console.log(obj);
</script>

之所以上述代码的拷贝会出现不同的结果，是因为 :

① 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象；简单理解就是：如果你和你朋友从不同地方前往同一个地址，到达的肯定是同一个地方，一个人在这个地方种了棵树，那么另外一个人到达时肯定也会有这棵树，即被影响了。
② 深拷贝，即加上第一个参数为true，则是完全克隆（拷贝的是对象，而不是地址），修改目标对象不会影响被拷贝对象。

下面第一张图是对浅拷贝过程的解释，第二张图是深拷贝过程的图解。

2. 堆和栈

我们知道数据类型分为简单类型和复杂类型。简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

① 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型，比如string，number，boolean，undefined，null。但是要注意null的数据类型检测出来是object。

② 引用类型：复杂数据类型，在存储时，变量中存储的仅仅是地址（引用），地址是十六进制的，因此叫做引用数据类型，通过new关键字创建的对象（系统对象、自定义对象），如Object，Array，Date等。

正是因为数据类型的区别，所以才有了堆栈空间分配区别：

(1) 栈（操作系统）：由操作系统自动分配释放存储函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈。简单数据类型存放到栈里面；

(2) 堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放到堆里面。

注意：javaScript 中没有堆栈的概念，通过堆栈的方式，是为了更容易理解代码的一些执行方式。

因此，在上面的拷贝中，如果是浅拷贝，而且是复杂数据类型的话，那么就是把变量在栈空间里保存的堆地址复制给了目标对象，目标对象和原对象其实保存的是同一个堆地址，所以操作的是同一个对象，因此更改目标对象中复杂数据类型的值，原对象也会跟着改变。

1. 代码体验

2. 堆和栈

猜你喜欢