Pre-compilation and execution order of JavaScript

Source: Internet
Author: User

I recently found a problem in reviewing JavaScript's event handling, and then I was writing JavaScript's precompilation and execution sequence.

Code:

Code One
//page after loading completedWindow.onload=function(){ varInput=document.getelementbyid (' button '); varP=document.getelementbyid (' P '); varI=1; while(input) {Input.onclick=function() {p.innerhtml+ = ' <br/> (' +I+ ') ' + This. NodeName; } I ++; Input=Input.parentnode; } } </script>

The results shown are:

When I change the red part of the code, I get a different result:

Code two
//page after loading completedWindow.onload=function(){ varInput=document.getelementbyid (' button '); varP=document.getelementbyid (' P '); varI=1; while(input) {Input.onclick=function() {p.innerhtml+ = ' <br/> (' +i+++ ') ' + This. NodeName; }input=Input.parentnode; } } </script>

The results are as follows:

The two different results come from the fact that the JavaScript code is pre-compiled and executed at run time, that functions and variables are processed during the precompilation phase, that all declared variables are assigned a value of underfined, and that all declared functions are assigned the definition of the function.

Let's test the JavaScript execution process.

1.javascript code Execution sequence is determined according to the script tag <script> the order of occurrence, browse the following page you will find that the code is executed from top to bottom

<script type= ' text/javascript ' >    alert (' one ');   </script>  <script type= ' text/javascript ' >  alert (' both ');   </script>  <script type= ' text/javascript ' >  alert (' three ');   </script>

2. Since the variable is given a undefined initial value at precompiled time, the first variable name in the code below is not assigned to the value, all the undefined value is given, the following name is assigned the Jude, so the second output is the Jude character.

<script type= ' text/javascript ' >    alert (name);                     // Show undefined    var name= ' Jude ';    alert (name);                     // Show Jude</script>

3. We know from the following results that we first output Hello wrold! twice in a row, and finally output the test twice sequentially, which results in the result that JavaScript is not executed exactly in sequence, but rather a pre-compilation is performed prior to execution, and the declarative function is extracted at precompiled time. Precedence is performed, and the same function overwrites and executes the assignment function.

<script type= ' Text/javascript ' >test (); //Output Hello world!    functionTest () {alert (' Hello ');    //Declarative Functions}                    Test (); //Output Hello world!    vartest=function() { //Assignment Function alert (' Test ');                    } test (); //Output Test    functionTest () { //declarative function alert (' Hello world! ');                    } test (); //Output Test</script>

4. The following code shows Hello, and then the Hello world! , because JavaScript blocks are independent of each other, and when the script encounters the first <script> tag, the JavaScript parser waits for the code block to be precompiled before it is loaded, and then executes it. The JavaScript parser then prepares to parse the next block of code, because JavaScript is executed by block, and when all one JavaScript calls the next block's function or variable, an error occurs

<script type= ' text/javascript ' >    function  Test () {        alert (' hello ');                // Show Hello     }    Test ()</script><script type= ' text/javascript ' >    function Test () {        alert (' Hello world! ');        // Show Hello world!      }    Test ()</script>

5. Although JavaScript is performed by block, different blocks belong to the same global scope, and the variables and functions of different blocks can be used with each other, that is, a block can use the variables and functions of the preceding block, but not the variables and functions of the block after it

<script type= ' Text/javascript ' >alert (name); //Show undefined    varName= ' Jude '; functionTest () {alert (' Hello ');                            } fun (); //A function that cannot call the next block</script><script type= ' Text/javascript ' >alert (name); //You can call the previous block's variable to display the JudeTest ();//You can call the function of the previous block to display the Hello    functionFun () {alert (' Fun '); }</script>

6.javascript in the pre-compilation phase is a function to partition the scope, and then through the Var declaration of the variable to open up memory space with the declaration function, the VAR variable is assigned the initial value undefined. At the execution stage, the mouth variable is assigned according to the scope.

The variable A in the function in the first code block is a local variable, because a is re-defined within the function, so the output is undefined, and the variable B is a global variable, because there is no re-declaration of B in the function, so the value of global variable B is found in the global variable when assigning a value to variable B. So the output is B.

The variables A and B are re-declared inside the function in the second code block, so they are all local variables within the function, so they all output undefined.

<script type= ' Text/javascript ' >varA= ' a '; varB= ' B '; functionTest () {alert (a); //Show undefinedalert (b);//Show B        varA= ' Test '; } test ();</script><script type= ' Text/javascript ' >varA= ' a '; varB= ' B '; functionTest () {alert (a); //Show undefinedalert (b);//Show undefined        varA= ' Test '; varb= ' Test '; } test ();</script>

In summary, the steps of JavaScript at execution time are:

1, first read into the first block of code

2, parsing the code block, if there is a syntax error, directly perform the 5th step

3. "Precompiled processing" of Var variables and function-defined functions (the assignment function is not precompiled)

4, execute the code block, error errors

5, if there is a block of code, read the next block of code, repeat step 2

6. End

  

Pre-compilation and execution order of JavaScript

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.