Understand some of the concepts of JS runtime

Frame: A frame is a continuous unit of work. When a JS function is called, the runtime environment creates a frame in the stack. Special function parameters and local variables are stored in the frame. When the function returns, the frame is pushed out of the stack. For example:

function Foo (b) {    var a = ten;     return A + B + 6;} function Bar (x) {    var c = 4;     return foo (c * x);}

After declaring the Foo and bar functions, execute the BAR function

Bar (20)

When bar is executed, the runtime creates a frame containing the bar's parameters and all local variables. This frame is added to the top of the stack.

The bar function calls the function of Foo internally, and when the Foo function is called, a new frame is created at the top of the stack. When the Foo function finishes executing, the corresponding frame at the top of the stack is removed. When the bar function is finished, the corresponding frame is also removed.

If the bar function is called in the Foo function, then an infinite loop function call is created, which causes the stack to be filled and the last throw error.

Stack: The stack contains all the steps (frames) of a message at execution time. The data structure of the stack is "last in, first out", so when a frame is added to a stack, it is always put on top, and the event loop is processed from top to bottom to the frame in the stack.

Queue:

The queue contains a list of information to be executed, each of which is associated with a function. When the stack is empty, a message in the queue is fetched and processed. The process is to invoke the function associated with the information, and then add the frame to the top of the stack. This information processing is considered to be the end when the stack is empty at this time.

Heap:

A heap is a memory storage space that does not focus on the order in which content is stored internally, and all variables and objects that are being used are saved in the heap. It also preserves frames that are no longer being used by the current scope but are not recycled by the garbage collection mechanism.

Event Loop:

The information inside the event loop is executed linearly, meaning that after it receives a message, it does not process any other information until it is processed. If the stack is empty, then the function executes immediately. When all the frames are added to the stack, the stack starts to clear the frames from top to bottom. Finally, the stack will be emptied and the next message will be processed.

Understand some of the concepts of JS runtime