One, the introduction

First, we should have a general understanding of stack and heap memory. Variables stored in stack memory should be fixed in size and not expandable. Variables stored in heap memory are much more flexible and can be dynamically increased or decreased. Understanding the stack and heap memory of JS can help us understand a lot of the content in JS, so let’s begin. Let’s start with basic and reference types in JS.

Primitive types and reference types

We know that data types in JS can be divided into primitive types and reference types. Base types are in stack memory, reference types are in heap memory, but references to reference types are still in stack memory. Those familiar with JS should know that there are several characteristics when we manipulate two types of variables:

1. Basic types can be copied directly, and the copied content has nothing to do with the original content. Right
2. Changes to reference types that are directly assigned to another variable affect each other, leading to the problem of shallow and deep copies
3. Base types cannot add properties or methods, whereas reference types can dynamically add or remove properties/methods

All of these problems can be easily understood once we understand stack and heap memory thoroughly.

Three, stack memory

The stack is a kind of data structure in which the stack memory is a block of memory used to store temporary variables. When a base variable is declared, it is stored in stack memory. For example, if you have code like this, they are stored in stack memory as follows:

	let a = 1;
	let b = "hello";
	let c = false;
Copy the code

The variable name	A variable’s value
c	false
b	“hello”
a	1

When it is replicated, a copy of the data in the corresponding memory is copied to the new memory, as shown below

	let d = c;
Copy the code

The variable name	A variable’s value
d	false
c	false
b	“hello”
a	1

Obviously, c and D occupy different storage space, so they are not related to each other, which explains the first feature mentioned above. At the same time, stack memory is allocated continuously, so it can’t be expanded or deleted later, which explains why we can’t add or remove attributes for base types. Therefore, we can summarize the characteristics of stack memory: fast access, but not flexible, at the same time because of the simple structure, after the use of variables can be released, memory recycling is easy to achieve.

Heap memory

Heap memory storage is different from stack, although they are a piece of memory, but heap memory storage variables have no rules. It will only use a chunk of space large enough to store variables, like this:

	let a = {};
	let b = {};
	let c = {};
Copy the code

	let d = c;
Copy the code

	/ / 1
	let a = {};
	let b = JSON.parse(JSON.stringfy(a));
	/ / 2
	let b = Object.assign({}, a);
	/ / 3
	function copy(obj) {
		let temp = {};
		for(let key in obj) {
			temp[key] = obj[key];
		}
		return temp;
	}
Copy the code

As you can see, their final operation is to make a copy of the heap and assign the address to the new variable. It is worth noting that if the content stored in the object is still an object, the object in the object has the same problem when we copy the content once. This is called shallow copy and deep copy. We can use recursion to the object and the object stored in the object copy processing, so that the implementation of a deep copy, you can be interested in the implementation of your own try. Again, this explains why we can add and remove properties or methods for reference types. Because its memory size is variable, we can manipulate it. When you add an attribute to a variable, you add storage space to the variable to store the newly added attribute, which stack memory cannot do. So, we can summarize the characteristics of heap memory: it is flexible to use, can dynamically add or remove space, but access is slow. Finally, a brief introduction to the garbage collection mechanism in JS. The most common garbage collection mechanisms in JS are tag scavenging and reference counting. Tag clearing is when a tag is initially made for each variable. When a variable enters an environment or is referenced by a variable in the environment, it removes the marker from that variable. Variables that are still marked at the end should be recycled. Because it’s no longer accessible. Reference counting refers to tracking the number of times each value is referenced. When a variable is declared and a reference type is assigned to it, the number of references to the value is 1. If the same value is assigned to another value, the number of references is increased by one. Conversely, if the variable containing a reference to this value takes another value, the number of references is reduced by one. When the number of references becomes 0, it can be reclaimed. This mechanism has a circular reference problem, interested students can look up the relevant information, I will not go into details, so in fact, the first method is more used.

Five, the conclusion

These are some thoughts on stack memory and heap memory, understanding stack memory and heap memory for us to understand JS is still very helpful. At the same time, I am also a food chicken in constant groping and learning. If there is anything wrong in the article, please correct it.