If you cannot understand the running mechanism of the JavaScript language, or simply put, you cannot master the execution order of JavaScript, then you are like a Bole who cannot control a thousand-mile horse, allowing the thousand-mile horse to escape and run around.
So how does JavaScript parse? What is its execution order? Before we understand these, let’s first understand a few important terms:
1. Code block
A code block in JavaScript refers to a code segment divided by the <script> tag. For example:
The code copy is as follows:
<script type="text/javascript">
alert("This is code block one");
</script>
<script type="text/javascript">
alert("This is code block two");
</script>
JS is compiled and executed according to code blocks. Code blocks are independent of each other, but variables and methods are shared. What does it mean? For example, you will understand:
The code copy is as follows:
<script type="text/javascript">
alert(str);//Because str is not defined, the browser will have an error, and the following cannot run
alert("I am code block one");//Not running here
var test = "I am a code block variable";
</script>
<script type="text/javascript">
alert("I am code block two"); //There is run here to
alert(test); //Popt "I am a code block variable"
</script>
In the above code, an error is reported in code block one, but it does not affect the execution of code block two. This is the independence between code blocks. The variables that can be called into code block one in code block two are inter-block sharing.
2. Declarative functions and assignment functions
Function definitions in JS are divided into two types: declarative functions and assignment functions.
The code copy is as follows:
<script type="text/javascript">
function Fn(){ //Declarational function
}
var Fn = function{ //Assignment function
}
</script>
The difference between a declarative function and an assignment function is that during the precompilation period of JS, the declarative function will be extracted first, and then the js code will be executed in order.
3. Precompilation period and execution period
In fact, the parsing process of JS is divided into two stages: precompilation period (preprocessing) and execution period.
During the precompilation period, JS will process all declared variables and functions in this code block (similar to the compilation of C), but it should be noted that at this time, the only thing that handles the functions is declarative, and the variables are only declared. No initialization and assignment.
The code copy is as follows:
<script type="text/javascript">
Fn(); //Execution result: "Function 2 was executed", the latter of the function with the same name will override the former
function Fn(){ //Function 1
alert("Function 1 was executed");
}
function Fn(){ //Function 2
alert("Function 2 was executed");
}
</script>
<script type="text/javascript">
Fn(); //Execution result: "The declarative function was executed", the function was declared and processed during the precompilation period, so even if the Fn() call function is placed before the declaration function is declared.
function Fn(){ //Declarational function
alert("Declared function executed");
}
var Fn = function(){ //Assignment function
alert("Execute the assignment function");
}
</script>
//Code block one
<script type="text/javascript">
alert(str);//The browser error reported, but the information window did not pop up
</script>
//Code block two
<script type="text/javascript">
alert(str); //Popt-up window "undefined"
var str = "aaa";
</script>
//JS declares the variable during the preprocessing period, but does not initialize and assign values, so the variable in code block 2 is unfiened, while the variable in code one does not exist at all, so the browser reports an error .
After understanding the above terms, I believe you have a rough impression of the running mechanism of JS. Now let’s take a look at an example:
The code copy is as follows:
<script type="text/javascript">
Fn(); //Browser error: "undefined"
</script>
<script type="text/javascript">
function Fn(){ //Function 1
alert("Function 1 was executed");
}
</script>
Why does the browser report an error when running the above code? Isn't the declaration function processed during the preprocessing period? Why can't the Fn() function be found? In fact, this is a misunderstanding point. We said above that the JS engine is executed in order of code blocks. In fact, in full, it should be preprocessed and executed according to code blocks, which means that the preprocessing is only the executed code. The block declares functions and variables, but for unloaded code blocks, it cannot be preprocessed, which is also the core of processing while compiling.
Now, let's summarize and organize:
The code copy is as follows:
step 1. Read the first code block.
step 2. Do syntax analysis. If there is any error, it will report syntax errors (such as bracket mismatch, etc.), and jump to step5.
step 3. Do "precompilation processing" of var variables and function definitions (there will never be error-reported because only the correct declaration is parsed).
step 4. Execute the code segment, and if there is any error, an error will be reported (such as the variable is not defined).
step 5. If there is another code segment, read the next code segment and repeat step2.
step6. End.
According to the execution order of HTML document streams, the js code that needs to be executed before rendering of page elements should be placed in the <script> code block before <body>, and the js after the page elements are loaded should be placed in the</body> After the element, the onload event of the body tag is executed at the end.
The code copy is as follows:
<script type="text/javascript">
alert("first");
function Fn(){
alert("third");
}
</script>
<body onload="Fn()">
</body>
<script type="text/javascript">
alert("second");
</script>