How JavaScript invokes the stack

This article introduces the knowledge of "how to call the stack of JavaScript". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1: basic concepts

Stack: used to hold simple data fields.

Heap: used to hold references to pointers to simple data fields in the stack.

Queue: is a first-in-first-out linear data structure.

The order of function calls in and out of the stack follows the principle of first-in-first-out.

Space allocation: heap: generally released by the programmer, if the programmer does not release it, it will be reclaimed by OS at the end

Stack: it is generally automatically allocated and released by the operating system.

Cache method: heap: stored in the secondary cache, the life cycle is generally determined by the garbage collection algorithm of the virtual machine

Stack: stored in the first-level cache, it is in the storage space when it is called, and is released immediately after the call.

Operational data: stack (first in, first out), queue (first in, first out).

The call stack is a stack structure that stores information about the active subroutines of a computer program when it is executed. It is a LIFO data structure that records the execution context of the code at run time. When a function's call statement is encountered, it records the current execution context, stacks the function, and creates a new execution context for it. (such as what function is being executed, what function is being called by this function, and so on).

The call stack is a mechanism for parsers.

Javascript is a single-threaded language, and the main thread can only handle one thing at a time. So how does javascript handle function calls?

The answer is-- call stack.

2:Event Loop (event Loop)

JavaScript is a single thread, and all the code it executes is placed in the following Call Stack. When the Call Stack is finished, it will look for tasks in the queue on the right. If there is a micro task, it will first execute the micro task, and then execute the macro task.

Event loop: synchronous tasks enter the main thread and asynchronous tasks are added to the task queue. When the task of the main thread is finished, the task in the task queue will be executed, and this process will be repeated over and over again. All synchronization tasks are executed on the main thread, forming an execution stack. In addition to the main thread, there is a task queue (task queue) in which an asynchronous task will place a task when it has a run result. After all the synchronization tasks in the execution stack are finished, read the task queue (read micro tasks, macro tasks first) and repeat the third step above.

Since js is single-threaded, it must be queued to execute code, so how to queue up is Event Loop. Although js is single-threaded, the browser is not single-threaded.

Console.log ('script start'); setTimeout (function () {console.log (' timeout1');}, 10); new Promise (resolve = > {console.log ('promise1'); resolve (); setTimeout (() = > console.log (' timeout2'), 10);}) .then (function () {console.log ('then1')}) console.log (' script end'); / / * script start * promise1 * script end * then1 * timeout1 * timeout2

3: macro task (Mask-task)

SetTimeout

SetInterval

I/O

Features: executed by host threads other than JavaScript threads, for example, timer triggers threads setTimeout, setInterval, and asynchronous http request threads. JavaScript threads are not idle macro tasks never have a chance to execute.

For (let item0; I