Detailed explanation of JavaScript stack and copy

1. Definition of stack

1. A stack is a special linear list. Its particularity is that the operations of inserting and deleting data elements can only be performed at one end of the linear list.

Conclusion: Last In First Out (LIFO), abbreviated as LIFO linear list.

The applications of stacks include: number system conversion, grammar and lexical analysis, expression evaluation, etc.

2. Queue is also a linear table with restricted operations. Its operation restrictions are different from those of the stack. There are restrictions on both ends. Insertion can only be performed at one end of the table (only in, not out), and deletion can only be performed at the other end of the table (only out, not in). The end that allows deletion is called the rear, and the end that allows insertion is called the front. The operating principle of the queue is first-in, first-out, so the queue is also called a FIFO table (First In First Out).

Since stacks and queues are also linear lists, they have two storage structures: sequential stacks and linked stacks. The difference between these two storage structures makes the algorithms for implementing the basic operations of the stack also different.

2. JS stack research

1. Stack and heap

The stack is automatically allocated memory space, which is automatically released by the system; while the heap is dynamically allocated memory, its size is uncertain and it will not be automatically released.

2. Basic types and reference types

(1) Basic type: a simple data segment stored in the stack memory, with a fixed data size and memory space size that can be allocated.
The five basic data types are Undefined, Null, Boolean, Number, and String. They are stored directly by value, so they can be accessed directly.

(2) Reference type: An object stored in heap memory. The variable actually stores a pointer that points to another location. Each space is of different size and needs to be allocated specifically according to the situation.

When we need to access the value of a reference type (such as an object, array, function, etc.), we first obtain the address pointer of the object from the stack, and then obtain the required data from the heap memory.

3. Passing by value and passing by reference

The reason why we explained what the heap, stack, and variable types in memory are is actually to better understand what "shallow copy" and "deep copy" are.
The biggest difference between basic types and reference types is actually the difference between passing by value and passing by address. Test cases:

var a = [1,2,3,4,5];
var b = a;
var c = a[0];
alert(b); //1,2,3,4,5 
alert(c); //1 
//Change the value b[4] = 6;
c = 7;
alert(a[4]); //6
alert(a[0]); //1

From the above we can see that when I change the data in b, the data in a also changes; but when I change the data value of c, a does not change.
This is the difference between passing by value and passing by reference. Because a is an array and a reference type, when it is assigned to b, the address in the stack is passed (equivalent to creating a new "pointer" with a different name) instead of the object in the heap memory. And c is just a data value obtained from the a heap memory and stored in the stack. Therefore, when b is modified, it will return to the a heap according to the address for modification, while c is modified directly in the stack and cannot point to the a heap memory.

3. Copy

1. Shallow copy

As mentioned earlier, when defining an object or array, the variable often only stores an address. When we use object copy, if the attribute is an object or an array, what we pass is just an address. Therefore, when the child object accesses this property, it will trace back to the heap memory pointed to by the parent object based on the address. That is, the parent and child objects are associated, and the property values ​​of the two will point to the same memory space.

var a = {
         key1:"11111"
    }
function Copy(p) {
var c = {};
for (var i in p) { 
           c[i] = p[i];
        }
return c;
  }
     a.key2 = ['Xiaohui','Xiaohui'];
var b = Copy(a);
   b.key3 = '33333';
     alert(b.key1); //1111111
     alert(b.key3); //33333
     alert(a.key3); //undefined

The key1 attribute in the a object is a string, and the key2 attribute is an array. a is copied to b, and all 12 attributes are copied successfully. When a string attribute key3 is added to the b object, b can be modified normally, but it is not defined in a. This means that key3 (basic type) of the child object is not associated with the parent object, so it is undefined.

b.key2.push("Dahui");
alert(b.key2); //Xiaohui, Xiaohui, Dahui alert(a.key2); //Xiaohui, Xiaohui, Dahui

However, if the modified property becomes an object or array, an association will occur between the parent and child objects. From the above pop-up results, we can see that when I modify the b object, the key2 attribute values ​​(arrays) of a and b have changed. Its status in memory can be represented by the following figure.

The reason is that the value of key1 is of basic type, so the data segment is passed when it is copied; but the value of key2 is an object in the heap memory, so when key2 is copied, the address pointing to the key2 object is passed. No matter how many key2s are copied, their value always points to the memory space of the key2 object of the parent object.

2. Deep copy

Perhaps the above is not the result we want in actual coding. We don’t want the parent and child objects to be associated with each other. In this case, deep copy can be used. Since only the address is passed when the attribute value type is an array or an object, we can use recursion to solve this problem. We can traverse all the attribute types belonging to the object in the parent object and assign them to the child object. The test code is as follows:

function Copy(p, c) {
var c = c || {};
for (var i in p) {
if (typeof p[i] === 'object') {
              c[i] = (p[i].constructor === Array) ? [] : {};
             Copy(p[i], c[i]);
           } else {
              c[i] = p[i];
          }
        }
return c;
  }    
     a.key2 = ['Xiaohui','Xiaohui'];
var b={};
     b = Copy(a,b);        
     b.key2.push("Dahui");
     alert(b.key2); //Xiaohui, Xiaohui, Dahui alert(a.key2); //Xiaohui, Xiaohui

From the above, we can see that when the key2 array of b is modified, a new value is not added to the key2 array in the parent object a, that is, the child object does not affect the key2 in the parent object a. The storage mode is as follows:

The above is a detailed explanation of JavaScript stack and copy. For more information about JS stack copy, please pay attention to other related articles on 123WORDPRESS.COM!