Cutting through JavaScript pre-Interpretation _ javascript skills

This article mainly introduces the JavaScript pre-interpretation, including the pre-interpretation with the var keyword and the pre-interpretation with the function keyword. For more information, see Pre-explanation with var keyword

Let's take a look at the result of this code execution:

The code is as follows:

Alert (n); // The undefined dialog box is displayed.
Var n = 10;

The pop-up result is undefined. why not 10? Let's look at the following code execution results:

The code is as follows:

Alert (n );
N = 10;

The following error is reported during running:

Why is an error reported this time? the reason is that the variable n is not declared when the code is running. through the comparison between the two codes, we found that variables with the var keyword and without the var keyword declaration are different. before code execution, it seems that the browser has given them an initial value undefined, therefore, before code execution, the browser engine automatically scans variables and defined functions with the var keyword and function keyword (which will be mentioned later). This process is called pre-interpretation.

Pre-explanation with function keywords

Let's take a look at the following code execution results:

The code is as follows:

Fn (); // pop up hello
Function fn (){
Alert ('Hello ');
}

The execution result pops up hello, and fn can be executed normally because fn was pre-interpreted before code execution, and fn was already defined (defined) during pre-interpretation, and we have doubts, why the execution result of the first code does not pop up 10, but is undefined. another concept, JavaScript, is introduced again.

Declare and defined in JavaScript)

We usually use the var key to declare variables and use the function keyword to define functions, except that the function keyword declares and defines the function to be executed at the same time, while var can only declare variables, does not have defined functions.

The variables declared with the var keyword are as follows:

The code is as follows:

Var n; // declares a variable n.
Var m = 10; // declare a variable m and assign 10 to it.

The following is a function defined with the function keyword:

The code is as follows:

// Defines a function fn
Function fn (){
Alert ('Hello ');
}

Differences between preinterpretation with var keyword and function keyword

In fact, the difference between them is that only the declarative part of the pre-interpretation with the var keyword (because it does not have the ability to define itself), and the function keyword is pre-interpreted both in pre-interpretation and definition. Now let's look back at the first piece of code and analyze it as follows:

What is the preference for the non-exercise

For more information, see the following code (except Firefox ):

The code is as follows:

Alert (n );
Fn ();
If (false ){
Var n = 10;
Function fn (){
Alert ('Hello ');
}
}

Undefined is displayed when the first line of code is executed, and hello is displayed when the second line of code is executed because n and fn are pre-interpreted before the code is executed, even if the if condition is false, persistent browser engines also scan variable n with var keyword declaration and fn with function key definition.

* The pre-interpretation ignores the re-declaration and does not ignore the re-definition.

This part is relatively difficult to understand, so an asterisk is added. See the following code:

The code is as follows:

Alert (n );
Var n = 10;
Var n = 9;
Var n;
Alert (n );

What is the execution result of this code? let's analyze it:

Continue with the code. analyze the following execution results:

The code is as follows:

Fn ();
Function fn (){
Alert ('1 ');
}
Fn ();
Function fn (){
Alert ('2 ');
}
Fn ();

The code analysis diagram is as follows:

Function pre-interpretation analysis with function definition

Summary:

This blog post uses a lot of code and provides an overview of the pre-interpretation in JavaScript. There are very few pre-interpretation descriptions in various books. In fact, there are not many scenarios that are usually used at work, unfortunately, the pre-explanation is mandatory for the interview questions of major companies. When we first came into contact with it, we felt that it always did not write code according to common sense, but sometimes it was able to run normally and would not report errors. of course, this also increased our exploration of its mystery, it also gives us a better understanding of how the browser engine interprets and executes our code. In the following blog post, I will take a few classic cases for comprehensive analysis. thank you again for your support!