jQuery object copy

If you want to copy (merge) an object to another object, you can use the $.extend() method .

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

①  deep : If set to true, it is a deep copy , and the default is false, a shallow copy .
② target: Indicates the target object that needs to be copied.
③ object1: the first object copied.
④ objectN: The Nth object being copied.

1. Code experience

<!-- 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>

The reason why copies of the above code produce different results is because:

①Shallow   copy is to copy the address in the complex data type of the copied object to the target object. Modifying the target object will affect the copied object; the simple understanding is: if you and your friend go to the same address from different places, the arrival will definitely be If one person plants a tree in the same place, then another person will definitely have the same tree when he arrives, that is, he will be affected.
②  Deep copy , that is, if the first parameter is true , it is a complete clone (the object is copied, not the address), and modifying the target object will not affect the copied object.

The first picture below is an explanation of the shallow copy process, and the second picture is an illustration of the deep copy process. 

2. Heap and stack

We know that data types are divided into simple types and complex types. Simple types are also called basic data types or value types, and complex types are also called reference types.

① Value type : simple data type/basic data type . When storing, the variable stores the value itself , so it is called a value type, such as string, number, boolean, undefined, and null. But please note that the data type of null is detected as object .

②Reference type : complex data type . When storing, what is stored in the variable is only the address (reference) . The address is in hexadecimal, so it is called a reference data type. Objects created through the new keyword (system objects, custom Object), such as Object, Array, Date, etc.

It is precisely because of the difference in data types that there is a difference in stack space allocation:

(1) Stack (operating system): The operating system automatically allocates and releases parameter values ​​of storage functions, values ​​of local variables, etc. It operates like a stack in a data structure. Simple data types are stored on the stack;

(2) Heap (operating system): stores complex types (objects), which are generally allocated and released by the programmer. If the programmer does not release them, they will be recycled by the garbage collection mechanism. Complex data types are stored in the heap .

Note: There is no concept of stack in javaScript . The purpose of using stack is to make it easier to understand some execution methods of the code.

Therefore, in the above copy, if it is a shallow copy and it is a complex data type , then the heap address saved in the stack space of the variable is copied to the target object. The target object and the original object actually save the same heap. address, so the same object is operated , so if the value of the complex data type in the target object is changed, the original object will also change accordingly.