As for assignment, shallow copy and deep copy, I have been thinking for a long time before, and I always think that I have remembered them, but I am too difficult. Today, I write down my notes. I hope I can master this thing completely and help anyone who wants to learn it.

I. stack, heap, pointer address

Stack memory: personal understanding is that a space will be used for basic data type and reference data type. This space exists in the form of key value. Value itself cannot be modified and can only be replaced by assignment;

Heap memory: a heap is a heap. Every opened space can be imagined as an empty paper box. The paper box stack is a heap. There is no concept of heap for basic data types. Heap, only for reference data types. The storage method should be in the form of object. The content of the object contains the data in the form of key value. The value itself is also immutable and can only be assigned and replaced;

Pointer address: the value saved on the stack for the reference data type is the pointer address, which points to the object saved in the heap.

Two, assignment

The assignment is divided into two parts, one is the assignment of basic data type, the other is the assignment of reference data type. The basic data type is assigned with "value" and the reference data type is assigned with "pointer address".

1. Assignment of basic data type

1 //Create a space in the stack. The name of the space is a，Storage value 1;
2 var a = 1;
3 
4 //Create a space in the stack. The name of the space is b. Then I'll take the first one. a Copy the value 1 of and store it in b
5 var b = a;

Figure below:

　　

2. Reference data type assignment

 1 //FirstCreate a space in the stack a Store pointer address, set pointer address as address1；At the same time, a space will be opened in the heap to place object data
 2 var a = {
 3     no: 1,
 4     per: {
 5         name: "jack"
 6     },
 7     per2: {
 8         name: "rose"
 9     }
10 }
11 
12 //a Assign to b,here b Will open up a space in the stack b，Used to place address1，This pointer points to a Object data in the heap
13 var b = a;
14 
15 //Modify the assigned value b，In fact, it's modification b Pointer address1 Object data pointed to
16 b.no = 1314;
17 
18 //modify b Will affect the original data (all levels of data will affect)
19 //The original data is not the original data, because a and b It's the same data
20 //It's like going from China to the United States a Location (such as Beijing) or b Places (such as Shanghai) go by plane, but they all arrive at the same place (i.e. object data)
21 b.per.name = "Wang Wu";
22 
23 console.log(a, b)

The above code is printed as shown in the figure:

　　 

Changes to b affect the original value of A. The modification of a will also synchronize with the value of b. the modification of a has not been written out by yourself. You can try it yourself. The result is the same.

For the above code, reference the data type assignment, as shown in the following figure:

　　

Whether you modify a or b objects, you are modifying obj

III. shallow copy

Refer to the shallow copy of data type. The code is as follows:

 1 //Create a space in the stack a，Deposit a Set the pointer address to address2a，At the same time, open up a space in the pile, and set this space as A，Deposit a Object data
 2 var a = {
 3     no: 1,
 4     per: {
 5         name: "jack",
 6     },
 7     per2: {
 8         name: "rose"
 9     }
10 }
11 
12 //Create a space in the stack b，Deposit b Set the pointer address to address2b，At the same time, open up a space in the pile, and set this space as B，Deposit b Object data
13 var b = {};
14 
15 //Yes a The data of is recycled, and judge if there is any key，Just assign the value to B Corresponding key position
16 //In this cycle, when data type is basic data type, value is assigned; when reference data type is encountered, pointer address is assigned
17 for(var p in a) {
18     if(a.hasOwnProperty(p)) {
19         b[p] = a[p]
20     }
21 }
22 
23 //Yes b First level modification of
24 b.no = 1314;
25 b.per2 = [];
26 
27 //Yes b Second level modification of
28 b.per.name = "Wang Wu";
29 
30 //Light copy b After that, the modification of the first level does not affect the original data, and the modification of the second level and above will affect the original data
31 //Currently, there is no third level or above. You can test it yourself.
32 console.log(a, b)

Operation results are shown in the figure:

No and per of a (this value represents the whole value "{name:"jack "}", not the attribute value "jack". a.no and a.per belong to the first layer, and a.per.name is the second layer) or the original value. b's modification has no effect on a, while b's modification of per's attribute value causes a's per's attribute value to become "king five", that is, the modification of the second or higher level will affect the original data. It can be understood that the shallow copy of the second layer or above is actually the "assignment of reference data types" mentioned in the previous section.

The summary is as follows:

　　

As shown in the figure above, the data in space B contains the value of no, i.e. 1; the per and per2 of the data in object a belong to the reference object data, so what B stores is the pointer address of its door, pointing to the address location of per and per2 respectively. Therefore, changing the no value of B object data will not affect the no of a, and changing the value of per or per2 will affect the per and per2 of A.

IV. deep copy

Deep copy, to put it bluntly, is the recursion of shallow copy, which is described in the chapter of shallow copy. The first layer of shallow copy has been completely copied to a new place, and then the second layer and above, their attribute values will be copied to a new place, and finally the well water won't violate the river water.

The code is as follows:

 1 //Create a space in the stack a，Deposit a Set the pointer address to address3a，At the same time, open up a space in the pile, and set this space as space1a，Deposit a Object data
 2 var a = {
 3     no: 2,
 4     per: {
 5         name: "jack"
 6     },
 7     per2: {
 8         name: "rose"
 9     }
10 }
11 
12 //Using recursion to a Copy properties and values,Then assign to temp，Then? return Get out. The pointer address is not copied at this time.
13 function getDeep(obj) {
14     var temp = Array.isArray(obj) ? [] : {};
15     for(var p in obj) {
16         if(typeof obj[p] == "object") {
17             temp[p] = getDeep(obj[p])
18         } else {
19             temp[p] = obj[p]
20         }
21     }
22     return temp;
23 }
24 
25 //Create a space in the stack b，Deposit b Set the pointer address to address3b. meanwhile b Create a space in the pile. Set this space as D，Deposit temp Object data for
26 var b = getDeep(a);
27 
28 //After deep copy, modify b The original data will not be affected whether the property value is modified or the whole value is replaced a
29 b.no = 1314;
30 b.per = []
31 b.per2 = {
32     name:"Wang Wu"
33 }
34 
35 console.log(a, b)

Shallow copy only copies the first layer, while deep copy copies the last layer. The code operation result is shown in the figure:

　　

It can be understood that the original of a has been completely copied and put into b. However, the operation of b is only related to b. What is the original value of a and what is still the current value? The modification of b has no effect on a at all.

Finally, the deep copy can be represented as follows:

　　

Five, summary

1. Assignment:

The basic data type is similar to a students have a computer, b classmates also want to, also bought a computer b for b classmate, how computer a and computer b are operated respectively are a students and b students respective things, computer display does not affect each other (data results);

The type of reference data is that there is only one computer, which is placed in the computer room. Students a and b operate the computer from dormitory to computer room respectively, which can affect the computer display. In the eyes of students a and b, what the computer displays in the final result depends on the last student who operates the computer (data result);

2. Light copy:

A student has a laptop computer and is equipped with a complete set of equipment, a comfortable mouse, a loud mechanical keyboard, etc. Classmate b didn't have the money to buy a computer, but he wanted to experience it, so he bought the same mouse and keyboard as classmate a and looked at it first. Then borrow the computer from classmate a to play. What's wrong with the mouse and keyboard of students a and b? They don't affect each other's use. The operation of the computer is the last one to operate the computer, and the computer is the last one to display the operation interface (data modification).

3. Deep copy:

A students have notebooks and full set of equipment, b students envy, let a students bought a complete set of exactly the same to themselves, but their respective use of computers depends on their respective operations, computers do not affect each other (data results).

The above is purely personal understanding. Please point out if there is any mistake. Thank you!