1. Stack and heap

stack is the automatically allocated memory space, which is automatically released by the system; heap is dynamically allocated memory, and its size may not be automatically released

2. Data type

JS has two data types:

Basic data types: Number, String, Boolean, Null, Undefined, Symbol (ES6). These types can directly operate the actual values saved in variables.

Reference data type: Object (in JS, all except the basic data type are objects, data are objects, functions are objects, and regular expressions are objects)

3. Basic data type (stored in stack)

Basic data types refer to simple data segments stored in the stack. The data size is determined and the memory space can be allocated. They are stored directly by value, so they can be accessed directly by value

var a = 10; var b = a; b = 20; console.log(a); // 10 value console.log(b); // 20 value

The following figure illustrates the assignment process of this basic data type:

4. Reference data type (for objects stored in heap memory, the size of each space is different, and specific configuration shall be made according to the situation)

A reference type is an object stored in the heap memory. A variable is actually a pointer stored in the stack memory (the reference address in the heap memory is saved), and this pointer points to the heap memory.

The reference type data stored in stack memory is actually the reference address of the object in heap memory. Through this reference address, you can quickly find the objects stored in heap memory

var obj1 = new Object();

var obj2 = obj1;

obj2.name = "I have a name";

console.log(obj1.name); // I have a name

Indicates that the two reference data types point to the same heap memory object. Obj1 is assigned to obj2. In fact, a copy of the reference address of the heap memory object in the stack memory is copied to obj2, but they actually point to the same heap memory object. Therefore, modifying obj2 is actually modifying that object, so it can be accessed through obj1.

1 2 3 4 5 6 7 8 9 10

var a = [1,2,3,4,5]; var b = a;//The data passed to the variable in the object is of reference type and will be stored in the heap; var c = a[0];//Pass value, assign the attribute in the object / the array item in the array to the variable. At this time, the variable C is the basic data type and is stored in the stack memory; Changing the data in the stack does not affect the data in the heap alert(b);//1,2,3,4,5 alert(c);//1 //Change value b[4] = 6; c = 7; alert(a[4]);//6 alert(a[0]);//1

From the above, we can know that when I change the data in b, the data in a also changes; But when I change the data value of c, a doesn't change.

This is the difference between value transmission and address transmission. Because a is an array and belongs to the reference type, when it is given to b, it passes the address in the stack (equivalent to creating a new "pointer" with a different name), rather than the object in the heap memory. c is just a data value obtained from a heap memory and stored on the stack. Therefore, when modifying b, it will go back to the a heap for modification according to the address, while c will modify it directly in the stack and cannot point to the memory of the a heap.

5. Shallow copy

As mentioned earlier, when defining an object or array, variables often store only an address. When we use object copy, if the attribute is an object or array, we only pass an address. Therefore, when a child object accesses the attribute, it will be traced back to the heap memory pointed to by the parent object according to the address, that is, the parent and child objects are associated, and their attribute values 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 = ["poppin ","poppin "]
var b = Copy(a);
b.key3 = "33333"
alert(b.key1)//11111
alert(b.key3)//33333
alert(a.key3);//undefined

b.key2.push("Fenng ")
alert(a.key2);//Xiao Hui, Xiao Hui, Da Hui

However, if the modified attribute becomes an object or array, the parent and child objects will be associated. From the above we can see:

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

//Method of implementing shallow copy in ES6
var a = {name:"warm wind"}
var b= Object.assign({},a);
b.age = 18;
console.log(a.age);//undefined
----------------------------------
//array
var a = [1,2,3];
var b = a.slice();
b.push(4);
b//1,2,3,4
a//1,2,3
----------------------------------
var a = [1,2,3];
var b = a.concat();
b.push(4);
b//1,2,3,4
a//1,2,3
----------------------------------
var a = [1,2,3];
var b = [...a]
b//1,2,3,4
a//1,2,3

6. Deep copy

Maybe the above is not the result we want in actual coding. We don't want the association between parent and child objects, so we can use deep copy at this time. Since the attribute value type is only addressed when it is an array and or image, we use recursion to solve this problem, and assign all attribute types belonging to the object in the parent object to the child object. The test code is as follows:

var a={key1:"11111"}
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 = ["poppin ","poppin "]
var b = {}
b = Copy(a,b); 
b.key2.push("Fenng ");
b.key2//Xiao Hui, Xiao Hui, Da Hui
a.key2//Xiao Hui, Xiao Hui