Understand deep copy and shallow copy

Shallow copy and deep copy

1. Data types

Data is divided into basic data types (String, Number, Boolean, Null, Undefined, Symbol) and object data types.

The basic data type is used to store references to the object in the stack. The actual data is stored in the heap memory

The reference data type stores a pointer on the stack to the starting address of the entity in the heap. When the interpreter looks for a reference value, it first retrieves its address in the stack and then retrieves the entity from the heap.

Shallow copy and deep copy

Deep and shallow copies are only for reference data types such as Object and Array. Deep and shallow copies look like this:

Shallow copy copies only Pointers to an object, not the object itself, and the old and new objects still share the same memory. But deep copy will create another identical object, the new object and the original object do not share memory, modify the new object will not change to the original object.

3. the difference between assignment and shallow copy
  • When we assign an object to a new variable, we assign the object’s address on the stack, not the data in the heap. That is, two objects point to the same storage space. If any object is changed, it is the content of the changed storage space. Therefore, the two objects are linked.
  • A shallow copy is a bitwise copy of an object that creates a new object with an exact copy of the original object’s property values. If the property is of a primitive type, the value of the primitive type is copied. If the property is a memory address (reference type), the memory address is copied, so if one object changes the address, the other object will be affected. That is, the default copy constructor only copies objects shallowly (member by member), that is, only the object space is copied, not the resource.

Let’s take a look at two examples. What changes does an assignment versus a shallow copy make to the original object?

In the example above, obj1 is the raw data, obj2 is the assignment, and obj3 is the shallow copy. We can clearly see the impact on the raw data, as shown in the following table:

4, shallow copy implementation
  1. Object.assign()

The object.assign () method copies the enumerable properties of any number of source objects to the target Object and returns the target Object. But object.assign () makes a shallow copy, copying references to the Object’s attributes rather than the Object itself.

Note: When an Object has only one layer, it is a deep copy;

5. Deep copy implementation

Handwritten recursion to achieve deep copy code is as follows: Recursive method to achieve deep clone principle: traverse the object, array until the inside is the basic data type, and then to copy, that is, deep copy

<script> var obj1 = { name: 'abc', age: 18, wife: { name: 'bcd', son: { name: 'aaa'}}} // deep copy // 4 steps: Function deepClone(obj) {var target = {}; function deepClone(obj) {var target = {}; var toStr = Object.prototype.toString, arrStr = ['object Array']; If (tostr.call (obj[key]) == arrStr) {// if (tostr.call (obj[key]) == arrStr) {// if (tostr.call (obj[key]) == arrStr) {// Else {target[key] = {}} target[key] = deepClone(obj[key]); } else {target[key] = obj[key]; }} return target; } var obj2 = deepClone(obj1); console.log(obj1); console.log(obj2); </script>Copy the code