/ / the interview questions
   var a = 1
   function fn() {
       console.log(a)
       a = 3
       console.log(a)
       var a = 2
       console.log(a)
       function a() {}
       console.log(a)
   }
   console.log(a)
   fn()
   console.log(a)
Copy the code

No more words, results first

   1
   ƒ a() {}
   3
   2
   2
   1
Copy the code

JS compilation process

See the above results, you do not need to panic, this is involved in the PRINCIPLE of JS compilation part, after reading the content, I believe that similar topics for you is not difficult.

JS code execution is divided into two parts, the first part is compiled, the second part is executed, the order is first compiled and then executed. So what does the compile phase and the execution phase do?

Compilation phase

In the compile phase, the entire JS code is searched for var/function and other key words that define variables, but the assignment statement is not executed, as described later. The function keyword assigns variables to function types and directly assigns functions to variables

Execution phase

The execution phase is to execute the JS code after the compilation phase, including function calls, assignment statements and so on

A simple understanding of the JS compilation process, the following details through the explanation of how to perform it!

Topic answer

According to the JS execution order, first look at the compile stage bar, here I will be the value of the variable step by step record, we do this type of topic, can also like me.

Compile phase -1, var a = 1

Var a = 1 var a = 1 var a = 1 var a = 1 var a = 1 var a = 1 var a = 1

Variable: A = null

Function fn() {/… /}

Function (){/… function (){/… }, and according to the JS feature known is the function when the assignment, internal content is not compiled execution, only when the call will be compiled execution.

Variable: A = null

Fn = function fn() {/… /}

3. Console. log(a)

This is an execution statement that is not executed at compile time.

Variable: A = null

Fn = function fn() {/… /}

4. Fn ()

This is an execution statement that is not executed at compile time.

Variable: A = null

Fn = function fn() {/… /}

5. Console. log(a)

This is an execution statement that is not executed at compile time. The code compilation phase is over, and now the execution phase begins

Variable: A = null

Fn = function fn() {/… /}

Execution phase -1. Var a = 1

Var a is already executed at compile time, so at execute time you just need to execute the assignment statement, so you assign 1 to A

Variable: A = 1

Fn = function fn() {/… /}

Function fn() {/… /}

At compile time, the execution is complete, and there is nothing to execute at run time

Variable: A = 1

Fn = function fn() {/… /}

3. Console. log(a)

Console. log outputs the value of variable A on the console. If a is 1, the console outputs 1

Variable: A = 1

Fn = function fn() {/… /}

Execution phase -4, fn()

Execute the function call, which then leaves the execution phase of the main program and enters the compilation execution phase inside the function FN.

Variable: A = 1

Fn = function fn() {/… /}

Fn Compile stage – 4.1, console.log(a)

Console. log is not executed during compilation

Variable: A = 1

Fn = function fn() {/… /}

Fn compilation stage – 4.2, a = 3

Compile-time assignment statements are not executed

Variable: A = 1

Fn = function fn() {/… /}

Fn Compile stage – 4.3 console.log(a)

Console. log is not executed during compilation

Variable: A = 1

Fn = function fn() {/… /}

Fn compilation stage -4.4, var a = 2

Var a=2; var a=2; var a=2

Variable: A = 1

Fn = function fn() {/… /}

Fn Internal variable: a = null

Fn Compile stage – 4.5, console.log(a)

Console. log is not executed during compilation

Variable: A = 1

Fn = function fn() {/… /}

Fn Internal variable: a = null

Function a() {}

Function defines the execution of a function and assigns the value of a variable to a function. The assignment checks whether there are any variables with the same name in the set of variables. The assignment checks local variables first, and then global variables.

Variable: A = 1

Fn = function fn() {/… /}

A = function a() {}

Fn Compile stage – 4.7, console.log(a)

The compilation phase console.log is not executed. The compilation phase completes, followed by the fn execution phase

Variable: A = 1

Fn = function fn() {/… /}

A = function a() {}

Fn Execution phase – 4.1, console.log(a)

Function a() {} function a() {} function a() {}

Variable: A = 1

Fn = function fn() {/… /}

A = function a() {}

Fn execution phase -4.2, a = 3

Assignment statement execution, changing the execution of a local variable to 3

Variable: A = 1

Fn = function fn() {/… /}

Fn internal variable: A = 3

Fn Execution phase – 4.3 console.log(a)

Console. log is executed and 3 is printed on the console

Variable: A = 1

Fn = function fn() {/… /}

Fn internal variable: A = 3

Fn -4.4, var a = 2

Only assignment statements are executed, changing the execution of local variables to 2

Variable: A = 1

Fn = function fn() {/… /}

Fn internal variable: a = 2

Fn Execution phase – 4.5, console.log(a)

Console. log is executed and 2 is printed on the console

Variable: A = 1

Fn = function fn() {/… /}

Fn internal variable: a = 2

Function a() {}

The function compile phase is already executed, but the execution phase is no longer executed

Variable: A = 1

Fn = function fn() {/… /}

Fn internal variable: a = 2

Fn Execution phase – 4.7, console.log(a)

Console. log is executed and 2 is printed on the console. Fn’s execution phase completes, and the execution phase of the main program continues

Variable: A = 1

Fn = function fn() {/… /}

Fn internal variable: a = 2

3. Console. log(a)

Console. log outputs the value of variable A on the console. Note that this is a globally executed program. Js programs do not actively access the local area, so the console output is global variable A with the value of 1

Variable: A = 1

Fn = function fn() {/… /}

Fn internal variable: a = 2

conclusion

At this point, the JS compilation and execution stage has been simulated, you see after the interview encountered similar problems, you can follow my method step by step, the basic is not wrong. Please, please, please!!