This is the second day of my participation in the August More Text Challenge.

preface

Recently, there has been some interest in the activity of javaScript’s underlying runtime memory space. I have read some relevant articles, understood part of them, but did not remember them completely. There are many overlapping places of relevant professional terms and related concepts, which are easy to confuse. Arrange relevant resources on one hand, comb these more abstract knowledge points by oneself on the other hand. Considering the concept of rote memorization is more, may be more boring, as far as possible pictures, examples, as far as possible to reduce the frequency of dropped book bags.

Introduction to the

Have a deep understanding of JavaScript implementation, comb through related terminology, and find a case study that is conclusive

The profile

JavaScript execution flow: variable promotion = “compile phase =” code execution

Variable promotion: To physically promote variable and function declarations to the top of the code

Compile phase: JavaScript compiles the code before it is executed to get the execution context and executable code

Execution phase: Execution in sequence, line by line

Implementation process

ShowName () console.log(myname) var myname = 'geeky time' function showName() {showName() console.log(myname) var myname = geeky time Console. log(' function showName executed '); }Copy the code

Compilation stage:……

Variable promotion: Both functions and variables are promoted to the beginning of the code before execution. In the implementation, only the functions and variables are put in memory at compile time. It feels like it’s at the beginning of the code.

Var myname = undefined function showName () {console.log(' function showName is executed ')}Copy the code

Execution context: An execution context is the context in which JavaScript executes a piece of code (including elements such as this, variables, objects, functions). It can be understood as a variable environment object.

VariableEnvironment: myname -> undefined, showName ->function: {console.log(myname)Copy the code

Executable code: The JavaScript engine compiles code other than declared variables into bytecode

ShowName () console.log(myName) myName = 'geek timeCopy the code

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — line — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Execution phase:……

Execution context stack (call stack)

Execution context: Compile global code, function calls, eval functions, and create execution context

Var a = 2 function add(b,c){return b+c} function addAll(b,c){var d = 10 result = add(b,c) return A + result + d} addAll (3, 6)Copy the code

1. Execution context pushing of global code (execution phase)

2. The execution context of addAll function is pushed (execution stage)

3. Push the execution context of the add function (execution phase)

4. The add function is out of context after execution (execution phase)

5. The addAll function is out of context (execution phase)

6. Global code is out of context after execution (execution phase)

Summary: JavaScirpt language is compiled and executed later. During compilation, the JS engine first stores variable and function declarations in memory. After compilation, the execution context and executable code are obtained. In the execution stage, the process of maintaining the execution context stack is simulated to deepen the understanding of JavaScript execution process.

So that gives you an overview of JavaScript execution. Implementation details for the different phases have been reduced for ease of understanding. Let’s take a closer look at JavaScript execution from a computer perspective, rather than from a global perspective.

PS: What computers are good at is calculating, not abstracting logic. Abstraction is something programmers are good at. That is, computers work with data. In order to have a deeper understanding of JavaScript execution, we also need to introduce the concepts of scope and scope chain, so as to completely solve the problem of where variables come from, as well as the context of function, function context stack, static scope and dynamic scope.