In-depth understanding of the execution order of javascript_Basic knowledge

If you cannot understand the operating mechanism of the JavaScript language, or simply put, you cannot master the execution sequence of JavaScript, then you are like Bole who cannot control a thousand-mile horse and let the thousand-mile horse break free and run around.

So how does JavaScript parse? What is its execution order? Before understanding these, let’s first understand a few important terms:

1. Code blocks
Code blocks in JavaScript refer to code segments separated by <script> tags. For example: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="50623" class="copybut" id="copybut50623" onclick="doCopy('code50623')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code50623"> <br><script type="text/javascript" ><br> alert("This is code block one");<br></script>

JS is compiled and executed according to code blocks. The code blocks are independent of each other, but variables and methods are shared. What does it mean? For example, you will understand:

Copy the code The code is as follows:

In the code, an error is reported when running in code block one, but it does not affect the execution of code block two. This is the independence between code blocks, and the variables in code one can be called in code block two, which is sharing between blocks.

2. Declarative functions and assignment functions

Function definitions in JS are divided into two types: declarative functions and assignment functions.

Copy code The code is as follows:

//js declares variables during the preprocessing period, but does not initialize and assign values, so the variables in code block two are unfiened, while the variables in code one are It doesn't exist at all, so the browser reports an error.


After understanding the above terms, I believe everyone has a rough impression of the operating mechanism of JS. Now let’s look at an example:

Copy Code

The code is as follows:

Why does the browser report an error when running the above code? Wouldn't the declared function be processed during the preprocessing period? Why can't the Fn() function be found? In fact, this is a misunderstanding. We said above that the JS engine is executed sequentially according to code blocks. In fact, it should be preprocessed and executed according to code blocks, which means that only the executed code is preprocessed. Blocks declare functions and variables, and code blocks that have not yet been loaded cannot be preprocessed. This is also the core of processing while compiling.

Now, let us summarize and organize it: