This is the fourth day of my participation in the August More Text Challenge. For details, see the August More Text Challenge

preface

In JavaScript, each variable needs a space in memory to store it.

Through the learning of memory space, based on this, step-by-step understanding of JavaScript execution context, scope chain, closure, prototype chain and other important concepts. Related articles will be printed later.

If the foundations are weak, the earth shakes.

Memory space is divided into two types: stack memory and heap memory. Let’s explore the memory space of JavaScript.

Understand common data structures

The stack

Unlike C/C++, there is no strict distinction between stack memory and heap memory in JavaScript.

How do you understand stacks? Let’s start with a picture:

In the picture above, disks are stored in the same way that data is accessed from the stack. The top plate, it must have been put on last, but it can be taken out first, that’s itLast in, first out. If we want to get to the bottom plate, from the computer’s point of view, we have to first remove the top plates one by one, so that the bottom plate is presented to you. This is theAfter the advanced. The characteristic of stack memory is first in, last in first out, in fact, as long as remember, a line, such as remember “first in”.

The heap

The heap data structure is a tree-like structure. It accesses data in much the same way as a bookshelf or book.

How do you understand a heap? Let’s start with a picture

You’ve all been to the library. How do you find the books you want? You can search for the title: “advanced Programming in JavaScript” on your computer, get the collection location and index number, and you can find the book you want, without having to go through so much trouble as the stack above.

The queue

A queue is a first-in, first-out (FIFO) data structure

Let’s start with a picture:For example, go to the movie ticket line to buy a ticket, the people in front of the line must be the first to buy the ticket, the back, is to buy the ticket.

Stack memory

Features:

  • Stores basic data types
  • According to the value of access
  • The stored value is of a fixed size
  • The system automatically allocates memory space
  • Small space, high operation efficiency
  • After the advanced

Store basic data types

Basic data types, also known as value types. Since the structure is relatively simple, the created value can be stored directly in “stack memory”, so the stack memory has two functions:

  1. Provides an environment for code execution
  2. Stores basic data type values

According to the value of access

Access by value is equivalent to a copy of the value of the original data, assigned to the new variable, the original variable changed, the new variable will not change. We can use examples to understand:

var a = 1.23;
var b = a;
a = 3.14;
console.log(a); // Output?
console.log(b); // Output?
Copy the code

As a result, as shown in the figure, b remains 1.23 because it is accessed by value.

The stored value is of a fixed size

JavaScript primitively typed values are stored directly on the stack, and the stack allocates memory space for variables when they are defined. Since the size of memory space in the stack is fixed, the variables destined to be stored in the stack are immutable.

Small space, high operation efficiency

Stack memory allocation is built into the instruction set of the processor. It is generally efficient, but the amount of memory allocated is limited.

Heap memory

Features:

  • Stores reference data types
  • Access by reference
  • The size of the stored value is not fixed and can be adjusted dynamically
  • Assigned by the code
  • Large space, relatively low operating efficiency
  • Unordered storage that can be obtained directly by reference

Stores reference data types

The structure of a reference data type is relatively complex (it is a complex, containing many values), so it cannot be stored directly in stack memory

This space is called “heap memory”. Reference data type values are stored in a separate “heap memory”!

Heap memory has only one purpose: to store values that refer to data types.

Access by reference

JavaScript does not allow direct access to data in the heap memory, so we cannot directly manipulate the heap memory space of an object. When we manipulate an object, we are actually manipulating a reference to the object, not the actual object. What do we mean by reference? It can be thought of as an address that is related to the actual value of the heap memory.

The address above is like the key to the warehouse, and the actual value of the heap memory is like the big warehouse. Object, you can add to it, modify properties, in fact, you have the key to the warehouse, you can put things in it.

Let’s try to understand it in terms of examples

var obj = { name: Dream Chaser };
var obj2 = obj;
obj2.name = 'experts';
console.log(obj.name); // Output?
Copy the code

When we copy a variable of reference type, we are actually copying the address on the stack, so the copied obj2 and obj actually point to the actual value of the same heap memory. So if we change obj2, the variable obj will also be affected, and vice versa. The result, as shown here:

The size of the stored value is not fixed and can be adjusted dynamically

So what do you mean by that? Take a look at the code below

var obj = {};
obj['name'] = Dream Chaser;
obj['age'] = 18;
obj['sex'] = 'male';
Copy the code

For example, we first declare an object, then add properties to the object and assign values. You can keep putting stuff in there.

The difference between stack and heap memory