Pre-explanation with var keyword
Let's first look at the results of this code execution:
The code copy is as follows:
alert(n);//Undefined pop-up
var n = 10;
The result of pop-up is undefined, why not 10? Let's look at the following code execution results:
The code copy is as follows:
alert(n);
n = 10;
The operation report is as follows:
Why does an error report this time is that when the code is running, the variable n is not declared; through the comparison of these two pieces of code, we find that there is a difference between variables with var keywords and variables without var keywords. Before the code is executed, the browser seems to have given them an initial value undefined. Therefore, before the code is executed, the process of the browser engine automatically scanning variables with var keywords and function keywords and defined functions and functions before the code is executed is called pre-interpretation.
Pre-explanation with function keyword
Let's see the following code execution results:
The code copy is as follows:
fn();//Popt hello
function fn(){
alert('hello');
}
The execution result pops up hello, and fn can be executed normally. The reason is that fn is pre-explanated before the code is executed. Fn has been defined (defined) during pre-explanation. We have questions again, why the first code execution result does not pop up 10, but is undefined, and another concept is introduced again.
Declare and definition in JavaScript
We usually use the var key to declare variables and use the function keyword to define functions. However, the function keyword declares and defines functions at the same time, while var can only declare variables and does not have the function of definition.
The following are variables declared with the var keyword:
The code copy is as follows:
var n;//Declare a variable n
var m = 10;//Declare a variable m and assign 10 to it
The following are functions defined with the function keyword:
The code copy is as follows:
//Define a function fn
function fn(){
alert('hello');
}
The difference between pre-explanation of var keywords and function keywords
In fact, the difference between the two is that when pre-explained with the var keyword, only the declaration part is pre-explained (because it does not have the ability to define itself), while when pre-explained with the function keyword, the declaration and definition are pre-explained at the same time. Then we will analyze the first code again and analyze it as follows:
Pre-explanation of unconventionality (scam)
Why it is said to be unconventional? Please see the following code (except Firefox):
The code copy is as follows:
alert(n);
fn();
if(false) {
var n = 10;
function fn(){
alert('hello');
}
}
Undefined will pop up in the first line of code execution, and hello will pop up in the second line of code execution; because n and fn are pre-explained before code execution. Even if the condition is judged to be false, the persistent browser engine will scan the variable n declared with the var keyword and fn with the function key definition to.
*Pre-interpretation ignores redeclaration, not redefinition
Because this place is relatively tangled and not easy to understand, it has added an asterisk, please see the following code:
The code copy 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 to upload the code, please analyze the following execution results:
The code copy is as follows:
fn();
function fn() {
alert('1');
}
fn();
function fn() {
alert('2');
}
fn();
The code analysis diagram is as follows:
Function pre-explanation analysis with function definition
Summarize:
This blog post uses a large piece of code and screenshots to overview the pre-interpretation in JavaScript. Looking at various books, there are very few descriptions of pre-interpretations. In fact, there are not many scenarios used in work. Unfortunately, pre-interpretations are a must-take in interview questions for major companies. When I first came into contact with it, I felt that it always didn't write code according to common sense, but sometimes it could run normally and would not report an error. Of course, this also increased our exploration of its mystery and also allowed us to further understand how the browser engine explains and executes our code. I will use a few classic cases to analyze it in the subsequent blog posts. Thank you again for your support!