javascript - Reference object assignment, deep and shallow copy jquery.extend

Question

A reference type is assigned to another reference type. They just point to the same address, and the operations affect each other.
Deep copy is to reallocate space so that it and the previous object or array are not affected.
Shallow copy is equivalent to assignment of reference type.

var a={banner:{size:1,weight:'0.5kg'}};
var b={apple:{size:1},banner:{size:3}};
$.extend(true,a,b)=>{banner:{size:3,weight:'0.5kg'},apple:{size:1}};
$.extend(a,b)=>{banner:{size:3},apple:{size:1}};

I have seen the jquery source code. Deep copy requires recursion.
But I don’t understand, what does it have to do with mutual influence, or is my understanding of the above concepts wrong

Answer 1

Shallow copy

Only traverse and reassign the top-level keys of the object (to the corresponding references), for example:

var a = {
  x: {
    name: 'x',
    value: 10,
  },
  y: 10,
  o: {},
}
var b = {
  x: {
    name: 'x2',
    value: 20,
  },
  y: {
    name: 'y2',
    value: 20,
  },
  z: {}
}

$.extend(a, b)

In this process, all top-level elements are taken out from b, namely b. Remain in a, then a.x === b.x, a.y === b.y, a.z === b.z, because they are all references pointing to the same object. Since it is a reference, when you operate a.x, such as a.x.name = 'x3', then b.x.name also becomes 'x3'.

Deep copy

Deep copy will go deep into the last layer of the object element for reassignment instead of reference. Take a and b above as an example, execute:

$.extend(true, a, b)

It will traverse deep inside b, and compare the value of each node with the node corresponding to a (exactly the same). If they are different, open up storage space for a and assign the value to it. If a does not exist, this node will be used for it. Assign a value after creation. There is no equality between the first level child node of a and the first level of b, and even == is not established.

After deep copying, some of the original nodes of a will be retained, and the past nodes of b will be overwritten or added, but there is no reference relationship with b, so modifying any node of a will not affect b. This is very useful when processing some data. In order not to affect the original data, it is necessary to make a deep copy before processing the data.

During deep copy, the index number of the array is treated as a key name, so the array elements will be modified instead of being added to the original data. For example:

var a = [
  {
    x: 1,
  }, 
  {
    x: 2,
  },
]
var b = [
  {
    y: 2
  },
]
$.extend(true, a, b) 

You will get:

var a = [
  {
    x: 1,
    y: 2
  }, 
  {
    x: 2,
  },
]

The first primitive of b is merged into the first element of a. This merger is because the array operates based on the index number of the element as the key. Therefore, you cannot use extend to merge arrays, but you should consider using merge or concat.

Answer 2

It’s just a duplicate of the name, it has nothing to do with deep copy/shallow copy. It should be more appropriately called recursive copy.