I. Explanation of nouns

The visualization of the noun helps to better understand the execution process. There are ECG, VO, AO, GO, execution context, execution environment stack, this, closure, prototype and prototype chain, Function and Object.

1. JS execution platform

Where can I execute JS code?

  • nodejs
  • The browser
  • Native and Non-native applications (webview)

So no matter where our JS code is executed, we ultimately need to provide an environment.

2. Execution environment (take browser platform as an example)

  1. Programs developed in programming languages will eventually be executed in memory when they run.
  2. inJSWhen the browser is loading the interface, it will actively request a piece of memory from the computer (execution environment stack).
  3. ESCExecution stack context

3. Execution context (no need to visualize it)

Start with a piece of code that makes sense of the existence of an execution context:

const name = 'zce'
function foo() {
    const name = 'lagou'
}
function fn() {
    console.log('1111')}Copy the code
  1. aJSA file can contain multiple types of code (variables, functions, objects) that are combined to form code blocks.
  2. Different code blocks may have the same name (as above)…… And so on, how does the code distinguish between them when it executes?
  3. How to distinguish: Put each piece of code in its own execution context
  4. We can think of the execution context as a kind of “container” that contains everything that is needed for the current code to be pushed and executed
  5. ECExecution context

4. Stack execution

  1. Execution environment stack, similar to large container (browser loading interface creates memory space by default), first in, then out
  2. Code execution (function calls) creates a separate execution context that goes into the environment stack and runs the internal code
  3. After the execution of the internal code is complete, consider whether to exit the stack

EC(G) global execution context

  1. By default, browsers generate a global execution context for storage.
  2. By default it automatically appears at the bottom of the stack (execution environment stack). When will the memory occupied by the execution context be freed? (Close the current page because the browser is multi-threaded and the current page is only one thread.)

VO(G) global variable object

  1. Global variable object (it is an object, must store data, store what?) .VO(G)inEC(G)Global execution context.

7, GO global object

  1. global objectThe global object, and the global objectVO“Variable object” is not the same thing
  2. By default, the browser creates a space when loading the interface, which holds some files that can be accessed directly in JSAPI(setTimeout,setInterval,toString……)
  3. In order toJSEasy to find these built-in apis in the global execution contextVOA variable calledwindow(reference address) point to theseAPI

8, the statement

Such as: var name; const age

9, definitions,

Name = ‘aaa’

Second, the expression form of JS data type

  1. Base data type values are stored in stack space, and reference types need a separate space to store them (heap memory)
  2. The heap will have a memory address (hexadecimal address), and the variables on the stack will hold the memory address
  3. The scope chain lookup mechanism, which eventually leads to (GO ）
  4. The discussion of functions is generally divided into two parts: function creation + function execution
  5. The creation of a function is similar to that of a variable. The function name can be regarded as a variable, but the difference between it and a variable is that in the promotion stage (pre-parsing) the function is declared + defined, while the variable is only declared.
  6. A function is also an object and therefore occupies a heap of memory.
  7. For functions, the scope is defined at creation time (lexical scope, scope)
  8. The function body is stored as a string in the heap memory corresponding to the function.
  9. The purpose of a function execution is to retrieve the string code stored inside it and run it as real code.
  10. Because functions also contain a lot of data, each function creates a new, separate execution context each time it is called, in order to isolate data from other code blocks. Store its internal data in this context, and then perform the push call as a whole.

Third, the execution of the function

Function execution requires six steps:

  1. Determine the scope chain: the current execution context of a function (e.g.EC(FOO)The lexical scope of the functionEC(G))
  2. determinethis, such as:window. (Follow-up discussion)
  3. Initialize theargumentCreate a pseudo-array…
  4. Parameter assignment: Parameter assignment is performed inAOAdd a variable to the
  5. Variable ascension
  6. Code execution: It is possible to open up new heap memory, assign values, create functions, and so on during code execution

Illustrate an example to understand function execution:

Closure mechanism

Closures are a mechanism where the code is just a concrete representation of what we call a large function nested within a small function and returned with a small function. Its main function is to protect and preserve data. Resolution: Function will produce new generated an execution context, generally the function code execution after requires a stack so as to release the memory space occupied by the current context, so as to release its internal statement and value, but if the data of the current execution context (generally are heap memory references) is outside of the current context variables referenced, The context cannot be released, and a closure is formed.

var zce = 100
function fn() {
  var zce = 200
  return function (a) {
    console.log(a + zce++)
  }
}

var foo = fn()
foo(10)
foo(20)
Copy the code

Diagram the execution of the above code:Analyzing closures in code: Closures have the advantage of being able to store some data, as shown belowzceInside the functionzceAnd the globalzceThey don’t interfere with each other, and closures can also store data, for example0x001The corresponding memory space should be inFNIt is released after execution, but becauseEC(G)In the middle offooIt has a reference to it, so it can continue to be used in subsequent code.

Closures and garbage collection

  • As you can see from the above code execution, code execution requires memory space. Both stack and heap memory belong to the computer memory space
  • There is a limit to the size of the memory space, so you can’t use it indefinitely, so you need memory management, which is garbage collection

Closure exercises

Analyze the execution of the following code:

var a = 10
function foo (a) {
    return function (b) {
        console.log(b + (++a))
    }
}
var fn = foo(10)
fn(5)
foo(6) (7)
fn(20)
console.log(a)
Copy the code

Diagram stack execution of code: