As discussed in the previous article, variable promotion does not actually move to the front of the code at the physical level, but the position of variable and function declarations in the code does not change and is put into memory by the JavaScript engine at compile time. A section of JavaScript code needs to be compiled by the JavaScript engine before execution, and only after completion of compilation will it enter the execution stage. The general execution process of JS code is shown as follows:

Let’s talk about these stages:

1. Compilation phase

So what is the relationship between compile phase and variable promotion?

To understand this, you can split the previous code into two parts.

The first part: variable promotion part of the code.

Var test = undefined function fighting() {console.log(' function being executed ')}Copy the code

Part two: Executing part of the code.

fighting();
console.log(test)
test = 'good'
Copy the code

Now we can refine the JavaScript execution process, as shown in the figure below:

As you can see from the figure above, when you enter a piece of code and compile it, you generate two parts: the Execution context and the executable code.

What is an execution context? The execution context is the execution environment of JavaScript when executing a piece of code. For example, when calling a function, the execution context of the function will be entered and the functions, such as this, variables, objects and functions, will be determined during the execution of the function. It doesn’t matter if you don’t understand it. I’ll explain it in detail later

Next, we can see that there is a Viriable Environment in the execution context, which holds the contents of the variable promotion, such as the variable test and function fighting in the above code, in this object. You can simply think of a variable environment object as having the following structure:

VariableEnvironment: test -> undefined, gighting ->function: {console.log(function being executed)}Copy the code

That is, during compilation, the contents of a variable’s promotion are placed in the variable environment of the execution context. This is the correct understanding of variable promotion.

After understanding the structure of the variable environment object, we will analyze how to generate the variable environment object with the following code.

fighting(); Console. log(test) var test = 'good' function fighting() {console.log(' function being executed ')}Copy the code

We can analyze the above code line by line:

Lines 1 and 2, because they are not declarative operations, the JavaScript engine does nothing;

In line 3, since this line is declared by var, the JavaScript engine will create a property named test in the environment object and initialize it with undefined;

In line 4, the JavaScript engine finds a function defined by function, so it stores the function definition in the HEAP, creates a fighting property in the environment object, and points the value to the function’s location in the HEAP (it doesn’t matter if you don’t know the HEAP, The execution heap and stack of JavaScript will be covered in a future article.

This generates the variable environment object. The JavaScript engine then compiles the non-declared code into bytecode, which you can use as an analogy:

fighting()
console.log(test)
test = 'good'
Copy the code

Ok, now that you have the execution context and executable code, it’s time to execute.

2. Implementation phase

The JavaScript engine starts executing executable code, line by line, in sequence. Let’s break down the execution line by line:

  • When the fighting function is executed, the JavaScript engine will start to look for the function in the variable environment object. Since there is a reference to the function in the variable environment object, the JavaScript engine will start to execute the function and output the result “function fighting is executed”.
  • The JavaScript engine then prints the “test” message, which it looks for in the variable environment object. Since the variable environment contains the test variable and its value is undefined, it prints undefined.
  • Next line 3 assigns “geek time” to the test variable and changes the value of the test attribute in the variable environment to “good” as shown below:
VariableEnvironment: test -> "good ", showName ->function: {console.log(" function executed ")Copy the code

So there are two little questions at the end? What is an execution context and what is a piece of code referred to in the article? The following article will talk about my understanding