@[toc]

JS underlying operation mechanism:

EC/AO/VO/GO/SCOPE/SCOPE-CHAIN

The JS code we write is executed in an environment, for example:

  1. Browser (Engine)
  2. Node (Based on V8 rendering JS)
  3. Webview (V8 engine)
  • A Stack allocated from the Execution Context.
  • EC Execution Context
  • AO Active Object Private Object
  • VO Variable Object Indicates the Variable Object
  • GO Global Object Global Object
  • SCOPE: given when a function is created
  • Scope-chain Specifies the SCOPE domain

ECStack

Browsers that want to execute JS code need to provide a code execution environment, ECStack

EC

In a programming language, the execution context created during code execution to distinguish between the different scopes in which the code is executed globally and in which the function is executed (with the goal of distinguishing the independence of the code within each lexical scope)

VO – AO

  • Variables may be created for each context code execution, so there is a space for storing variables VO in each context
  • Variable object: Holds variables in the current context
    • It’s called VO(G) globally.
    • Called AO(XXX) in the private context, it is also a variable object

GO

The browser places all properties and methods that need to be called by JS later in the GO object and globally creates a window variable pointing to the GO object

Heap Stack memory and garbage collection mechanism

Memory stack problem

let a = {n: 1};
let b = a;
a.x = a = {n: 2};
console.log(a.x);
console.log(b);
Copy the code
  • Notice that the priority of x is broken out{n:2}A.x points to the new heap space
  • Then the pointer to A changes to point to the new heap space
  • soa.xFor undefined, b refers to the original heap space

Function creation and execution

Create a function

  1. Create a heap memory (hexadecimal memory address: AAAFFF111)
  2. Declare the scope of the current function (in which context it was created, whose scope it is)
  3. Store the code in the function body in heap memory as “strings” (create a function that stores a bunch of strings, so the function is meaningless as long as it doesn’t execute)
  4. Place the address of the function heap on the stack like an object for the variable to call (function name)

Executive function

  1. Each function execution forms a new private context, EC(xx) (intended to be executed by code in the function body), which is then pushed to the stack

  2. There is a variable object AO(xx) that holds private variables in the private context

  3. There are many things to do before the code executes:

    1. Initialize its scope chain < context on itself, function scope >
    2. Initialize THIS (arrow function does not have THIS)
    3. Initialize ARGUMENTS collection (arrow functions have no ARGUMENTS)
    4. Parameter assignment (Parameter variables are private variables of the function and need to be stored in the AO)
    5. Variable promotion (variables declared in a private context are private)……

  4. Code execution (take strings previously stored in the function heap and execute them in context)

  5. Determine whether the current context is released from the stack according to the actual situation

    1. In order to maintain stack memory size (memory optimization), in general, if the context created by the current function execution is pushed onto the stack and the code execution is complete, the secondary context is removed from the stack (context freed into: The global context is generated when the page is opened, and it needs to be released when the page is closed (only when the page is closed).

    2. Special case: as long as something in the current context is occupied by something other than the context, the current context cannot be released (variables stored in the context, etc.) => This case is considered a closure

Scope chain lookup mechanism:

  • When a variable is encountered during code execution, we first check whether it is our own private variable. If it is our own private variable, all subsequent operations are operation private (no direct contact with the outside world).
  • If it is not its own private, follow the scope-chain and look in the parent context (if it is the parent private, the following operations are to operate on variables in the parent context)…. Keep looking until you find EC(G)

Browser garbage collection mechanism

Stack memory (execution context)

  • Normally, when the function is executed, the resulting context is removed from the stack
  • Special case: something in the current context is occupied by something outside the context and cannot be released from the stack
  • Global context: created by loading pages, it is released only when the page is closed

Heap memory: The browser’s garbage collection mechanism

  • Reference counting (IE mostly) : In some cases can cause counting to be messed up so that memory cannot be freed (memory leak)
  • Check for references (mostly Google) : The browser optimizes memory by checking all heap memory in turn when idle, freeing up memory that is not being used by anything

Manually release management memory

Unencumberable (manually assign external references to null)

The title

an

var x = 1;
function func(x, y = function anonymous1() {x = 2}) {
    x = 3;
    y();
    console.log(x);
}
func(5);
console.log(x);

Copy the code

  1. Global Execution Context EC(G)
  2. Private execution context
    1. EC(FUNC). Scope chain:<EC(func), EC(G)>
    2. EC(Anonymous1) Scope scope:<EC(anonymous1), EC(func)>

parsing

  1. EC(func)In thex = 3;impactEC(func)Parameter x in
  2. EC(anonymous1)In thex=2impactEC(func)The parameter x in, becauseEC(anonymous1)There’s no x, so print 2
  3. The last log printsEC(G)Where x = 1

Question 2

var x = 1;
function func(x, y = function anonymous1() {x = 2{})var x = 3;
    y();
    console.log(x);
}
func(5);
console.log(x);
Copy the code

  • Note one thing:y()Don’t belong withvar x = 3Sibling block-level contextEC(BLOCK)
  • He was declared inEC(FUNC)In the
  • So through the scope chain<EC(anonymous1), EC(FUNC)>availablex = 2Change isfuncParameter x in