JavaScript basics: stack, and variable storage in JS

One, stack concept

1. Stack

   The stack is a linear structure used to store local variables and function parameters in memory, following the principle of first in, last out . Data can only be pushed into the stack in sequence and popped out in sequence. Of course, the stack is only a formal description of a continuous area in the memory, and the operations of data pushing and popping are only the up and down movement of the stack pointer on the memory address. As shown in the figure below (take C language as an example):

   

   As shown, the stack pointer points to the beginning memory 0x001location, then sumthe function call starts, since the two variables declared, to the two values stored in the stack, the stack pointer also corresponds starts moving, when sumthe end of the function call, only It just moves the stack pointer down, not the real data popping, the data is still there, but it will be overwritten the next time it is assigned.

   The data in the stack area in the memory will be automatically popped out of the stack (overwritten) after the function call ends. No program operation is required, and the operating system will automatically execute it. In other words: the variables in the stack will be automatically executed after the function call ends. Will disappear.

   Therefore, the characteristics of the stack: light weight, no manual management is required, the function is created when the time is adjusted, and disappears when the call ends.

2. heap

   A pile can be simply regarded as a large memory space, just like a human suitcase. It doesn't matter what you put in it, but the suitcase is a personal item, and the operating system does not care what you put in your suitcase. I will not take the initiative to clean up your suitcase, so in Cthe language, the content of the heap is the need to manually clean the programmer, or memory overflow occurs.

   In order to solve the problem of heap memory processing, Javascripta solution to the garbage collection mechanism is proposed (for details, please find the previous tweets).

   Therefore, the characteristics of the heap: large space, but need to be manually cleaned, will not be cleared or disappear automatically.

   (Note: The heap mentioned in memory is not the heap mentioned in data deconstruction)

Stack cache mode: The stack uses the first level cache. They are usually in the storage space when they are called, and they are released immediately after the call. The heap is stored in the secondary cache, and its life cycle is determined by the garbage collection algorithm of the virtual machine. Therefore, the speed of calling these objects is relatively low.

Two, variable storage

If you copy this conclusion directly (conclusion: for primitive types, the data itself is stored in the stack, for object types, only a reference to an address in the heap is stored in the stack). Obviously it is not true.

In the case of a closure, the data in the closure (including basic types and reference types) will be added to the heap. Below is the sample code.

function test () {
    
    
    let num = 1;
    let string = '前端';
    let bool = true;
    let obj = {
    
    
        attr1: 1,
        attr2: '收割机',
        attr3: true,
        attr4: 'something'
    }
    return function log() {
    
    
        console.log(num, string, bool, obj);
    }
}

With the testcall, in order to ensure data variables are not destroyed, into an object called Mr. heap Scope, as the variable Scopeattributes to save up. The data structure in the heap is roughly as follows:

Since the Scopeobjects are stored on the heap, so the return of logfunction can have full Scopeaccess to the object.

The following is the code segment Chromeexecution results in:

The red frame part, consistent with the above, examples JavaScriptof variables and the stack does not exist, but the pile, with a particular object ( Scope) save.

So we know from this: the data in the closure is stored in the stack.

In JavaScriptthe variable divided into three types:

• Local variable
• Captured variable
• Global variable

Local variable : An object declared in a function and will not be used by other scopes after the function returns. The following code part*is a local variable.

function test () {
    
    
    let part1 = 1;
    var part2 = '前端收割机';
    let part3 = {
    
    a: 'goodJob'};
    const part4 = true;
    return;
}

Captured variable : declared in the function, but the variable is still used in the unexecuted scope (function or class) after the function returns, then the variable is the captured variable (the variable in the closure). The following code catch*is to be captured variables.

function test1 () {
    
    
    let catch1 = 1;
    let catch2 = '前端收割机';
    let catch3 = true;
    let catch4 = {
    
    a: 'goodJob'};
    return function () {
    
    
        console.log(catch1, catch2, catch3, catch4)
    }
}

function test2 () {
    
    
    let catch1 = 1;
    let catch2 = '前端收割机';
    let catch3 = true;
    let catch4 = {
    
    a: 'goodJob'};
    return class {
    
    
        constructor(){
    
    
            console.log(catch1, catch2, catch3, catch4)
        }
    }
}

console.dir(test1())
console.dir(test2())

To copy the code Chrometo see the output target [[Scopes]]at a corresponding Scope.

Global variables : global variables is globalin the browser windowin nodeyears to global. Global variables are added to the default function scope chain of the most low-end, that is, the above function in [[Scopes]]the last.

[External link image transfer failed. The source site may have an anti-leech link mechanism. It is recommended to save the image and upload it directly (img-4TnJE40Z-1611561040357)(D:\CSND\global.png)]

Global variables that require special attention: varand let/constdistinction.

Global varvariables is actually just globalan object to add a property.

var testVar = 1;

// 相当于以下操作
windows.testVar = 1;

Global let/constvariables does not modify the windowsobject, but the variables are declared on the next special object (and Scopesimilar).

let testLet = 1;

console.dir(() => {})

Copy the Chromefollowing results:

3. Conclusion

1. The storage method of variables: Stack, heap.

2. Types of variables: global variables, captured variables, local variables.

3. For the storage of variables:

• Global variables and captured variables are stored in the heap (the value of the basic type in the global is stored in the heap, and its reference address is stored in the stack memory of the global execution context).
• Local variable: If it is a basic type, the data itself is stored in the stack. If it is an object type, the stack stores a reference to the object in the heap (the object itself is stored in the heap).