* This article is looking at [JS advanced order] the whole dry goods! An article that gives you a thorough understanding of stacks, heaps, queues, execution stacks, context, Event loops, and how you feel after reading it.

  1. Js data type
  2. Stack heap memory calls the stack function with the [[scope]] property and scope chain
  3. Closures & Chrome view closures

Js data type

The original type

  • number
  • string
  • boolean
  • undefined
  • symbol(es10-2019)
  • bigint(es11-2020)
  • null 
    typeof null // Object, because the Object address in JS starts with 000 and null is all zeros
Copy the code

Reference type (unique) Object

Subsets of Object:

  • Fucntion Fucntion.prototype.__proto__ === Object.prototype
  • Array Array.prototype.__proto__ === Object.prototype
  • Map Map.prototype.__proto__ === Object.prototype
  • Set Set.prototype.__proto__ === Object.prototype
  • WeakMap WeakMap.prototype.__proto__ === Object.prototype
  • WeakSet WeakSet.prototype.__proto__ === Object.prototype
  • WeakRef(es12-2021) WeakRef.prototype.__proto__ === Object.prototype
  • Math Math.__proto__ === Object.prototype
  • Special reference type Number String Boolean

Stack and execution context

  • Stack: First in, then out. The js stack memory is used to hold Pointers to raw data types and reference types
  • Heap: Stores data in key-value form without order. The js heap memory holds the value of the reference type

When JS is executed, the functions to be executed will be placed in the execution stack of the JS engine, and then removed from the stack after execution. At this time, the basic type data created inside the function will be stored in the stack, as well as the pointer to the type data. After execution, if there are no closure problems, the stack is removed (destroying the call stack of the function).

The execution stack, also known as the call stack or execution context stack, can be viewed in Chrome

Closure

In the example above, if there were closures such as the following. Function func1 should be destroyed after it exits the stack, but because function func2 created inside func1 uses a variable declared in func1, the stack of func1 is destroyed, but because func2 was created, Js binds the func2 function to its lexical scope. So the variable A can be found on the scope chain of func2.

Scope: is the [[Scope]] property of the func2 function, which is a hidden property of the function and accessible only to the JS engine.

Local: func2’s context-accessible variable, with no A in it

Closure: The lexical context in which func2 was declared. (a) The call stack of func1 is destroyed because the variable declared in func1 is used in func2, but the data content is transferred from the call stack of func1 to the [[scope]] property of func2. Make func2 accessible.

Global: indicates the Global context

Closures: a combination of functions and the lexical environment in which they are declared. Closures allow you to access the scope of an outer function in an inner function. Each time a function is created, the closure is created at the same time the function is created. — — — MDN

PS: If func2 does not use a variable declared in func1, part of the lexical context of func1 (possibly imprecise wording) is not added to the scope chain of Func2, as shown below.

At the end of the day, it's really important to understand the scope chain [[scope]]. Closures are just one node or several nodes in the scope chain