preface

Tell a little story: when I was in school, everyone in the class has his own desk (unified size) of the class, the desk space is limited, then there won’t be room for normally only put a bag, the class teacher of public area also has a larger store content ark, every teacher has a key to open, students can’t go to the teacher’s locker, because they are “students”. When the teacher checks the homework, the students whose names are called need to take their bags out of the drawer and pick up their homework. One day when the math teacher went to take his U disk, he found that the U disk was missing. It turned out that the English teacher borrowed something to copy yesterday. When a new teacher comes to class, the head teacher will make a new key for the new teacher, and when a new student comes, he will get his desk.

After reading this article, we can discuss this little story in the comments section!

A. answer B. question C. answer D. answer

Do we recognize copy == copy in JS?

For example (example -1) :

function foo(){
    var a = 1;
    var b = a;
    a = 2;
    var c = { name:'abc'};
    var d = c;
    c.name = "123";
    
    console.log(a);/ / 2
    console.log(b);/ / 1
    console.log(c);/ / 123
    console.log(d);/ / 123
}
foo();

Copy the code

Basic and reference data types in JS

The basic Data types Number, String, Boolean, Null, Undefined, Symbol, and BigInt reference the Data types Object, Array, Function, Data, and so on

JS memory allocation mechanism

Obviously, the copy in JS is not exactly the same as the copy we understand! Q1: Why are there different copy results? A1: Actually it has to do with the memory allocation mechanism of JS. In JS, data types are divided into basic data types and reference data types. JS stores different types of values in different ways. Basic data types are stored in the stack area of memory, and reference data types are stored in the heap area and accessed by reference addresses. Q2: Let’s first talk about why memory is divided into stack and heap areas. Can all data be stored in the stack area? A2: js engines need to use the stack to maintain during program execution context state, if the stack is too big, all data on the inside, will affect the efficiency of context switching, thereby affect the execution efficiency of Q3: then why basic data type to be stored in the memory stack area, and the reference data type to be stored in the memory heap area? A3: Basic data types take up a fixed amount of memory, so they can be stored in a smaller area of memory – the stack. This storage facilitates quick lookup of the value of the variable. The memory size of references to data type values changes and, if placed on the stack, will slow down the speed of JS query variables. So on the stack, the reference data type is stored in the corresponding heap memory access address, the reference data type value is stored in the heap.

JS memory access mechanism

1. Access by reference: javascript does not allow you to access objects stored in the heap directly, so when you access an object, you first get the address of the object in the heap, and then use that address to retrieve the value 2 in the object. Primitive values are directly accessible.

Take a look at example 1 from a memory perspective

Dynamic graphic ：

1. When foo() is executed, an execution context belonging to foo() is created in the execution stack area, which can be understood as the scope of function foo(). 2. According to the principle of JS compilation, we declare four variables. JS will first look for whether there is a declaration of the same variable name in this scope. 3. When assigning and changing values to variables, the base datatype directly changes the value of the stack variable, while changing the value of the reference variable, it changes the value of the heap. Variables stored at the same address access the same heap value 4. When we need values, like console.log(a,c); , we find the RHS references to A and C in the heap memory (find variables A and C in the stack area), read the value of variable A directly, and then go to the heap area according to the address of variable C when accessing the reference address.

conclusion

Shallow copy: only the reference address of the object is copied. Both objects refer to the same memory address, so if you change any of the values, you will change the value of the heap to which the address refers. Deep copy: the system automatically allocates memory areas in the execution stack, and the variable values are stored in the stack area instead of the address. The variable values are the same, and the copied object is independent of the original object.

Tip: after the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right