Personal understanding of JavaScript precompilation

What is JS pre-compilation

Immediately to find a job, before learning JS are very basic fur, as the most fiery language, I must be research, but just contact with the pre-compilation I was going crazy, for a brain does not work really too round, spare a long time also do not know there is no around understand, so first recorded down, Later found that there is nothing wrong to correct again.

First, the JS interpreter in the execution of a script, the first pre-compilation, the code declared variables and functions to process, and then in the code order to translate the execution , then JS in the pre-compilation and execution phase of the separate what to do? There are a lot of great God's posts on the internet to explain:

1. A "precompiled" operation is performed before executing the code: first, an active object is created in the current execution environment , and those variables declared with VAR are set to the properties of the active object, but the assignment of these variables is now Undefined, and add those functions defined as function to the properties of the active object, and their values are exactly the function's definition

2. In interpreting the execution phase, when a variable needs to be parsed, it is first looked up from the active object of the current execution environment, and if it is not found and the owner of the execution environment has the prototype attribute, it will be looked up from the prototype chain, otherwise it will be found by the scope chain; Such a statement assigns a value to the corresponding variable (note: The assignment of the variable is done during the interpretation execution phase, and if the variable is used before that, its value will be undefined)

After reading my expression is crazy, the heart is broken,,, the object Ah, prototype Ah are what ghosts, (forgive me is a small white, these things do not understand), finally through their own attempts, summed up a bit

1. During the precompilation phase, all variables declared with VAR are first displayed, or the "variable" function refers to the most previous creation, regardless of whether they are assigned at the same time when they are declared or not, they are assigned a value of undefined at the time of the precompilation creation, and for "defined" function declarations, functions declared with function, Its function is also proposed to be created, but the content assigned after creation is the function definition itself; In addition, Var shows that the declared variable is created before the defined function

2. After the above precompilation, the JS code is interpreted in code order, and when an assignment statement is encountered, the value of the previously precompiled variable is changed, such as var a = 11; at the pre-compilation stage, a variable is raised to create, assign a value undefined, and when executed to this statement, at the execution stage, assigns 11 to a

For INSTANCE

Now, the basic is this, the following with a few examples in detail, the answer will be given in the back, you can first think about what the result is ~

<script type= "Text/javascript" >console.log (a); var a = 1;console.log (FA); FA (); function fa () {    Console.log ("method fa ()");} Console.log (FB); FB (); var function () {    Console.log ("Method fb ()");}
FB ();
</script>

Like Java If you use this variable before a variable is created, it will be an error, but JS has been pre-compiled prior to the execution of the variable, so will not error;

First, the pre-compilation phase, all the variables and functions mentioned before the creation, and assign the corresponding initial value, the above-mentioned code is pre-compiled processing equivalent to the following code form:

<script type= "Text/javascript" >var a = undefined; var fb = undefined; function fa () {    Console.log ("method fa ()"= 1function() {    Console.log (" Method FB () ");
FB (); </script>

First, the variables declared by VAR are first pre-set, created, assigned, followed by the pre-compilation of the defined function, and when the precompilation is finished, it goes to the execution stage, which executes from the top down:

1) encountered the first Console.log (a), because the pre-compilation has created a variable, so the output undefined;

2) Further down the order, encountered the A=1 assignment statement, at this time to assign a value of 1 to A;

3) Continue, Console.log (FA), FA is a defined function, pre-compiled assignment content is the definition of a function, output

function fa () {

Console.log ("Method FA ()");

}

4) executing FA (), i.e. calling FA function, Output method FA ()

5) perform console.log (FB), output undefined

6) Execute FB (), Error! uncaught TYPEERROR:FB is not a function, because FB is still a variable, and has not performed the operation to assign the function to FB;

7) The Uplink code comment, continue to execute, at this time a function is assigned to the FB

8) Execute FB () again, output method FB ()

Another example

 <script type= "Text/javascript" >console.log (anumber);  var  anumber = 100;tweak ();  function   tweak () { var  newthing = 0;    Console.log (newthing);    newthing  = anumber;    Anumber  = 42;  if  (false  ) { var   Anum         ber     Anumber  = 123;    } console.log (anumber);  Console.log (newthing); }console.log (anumber);  </script> 

First of all, to precompile, note that there are two anumber, one is global, one is a local variable in the if code snippet, the anumber of the global variable is pre-compiled, but even if the IF statement is not executed, However, Precompilation discovers the Anumber local variables declared in the if code snippet, and it will be precompiled! In other words, pre-compiled June Zhao Eat not mistakenly, whether you are global variables, local variables, execution of this variable need or not, as long as the display with VAR declaration, will be precompiled , but here the two anumber scope is different;

Next is the tweak () definition function will also be pre-compiled, precompiled end, into the implementation phase, the following published job answers ~

Undefined 0 undefined 100

You can try the code var anumber = 100; What happens when I comment out?

In the execution of the first sentence Console.log (anumber) will be an error! Why is this?

Since the global variable is commented out, only the anumber of the If code block is now preprocessed, and the local variables are called out of scope.

Summarize

1) First, JS executes all the variables, functions precompiled before the script, and the variables are pre-compiled before the function

<script type= "Text/javascript" >console.log (FC); // in the definition section of the output FC method, if the variable and function have the same name, the variable is precompiled first, and the post-precompiled function, the declaration of the function overrides the variable function FC () {    console.log ("FC method"); var fc = "FC variable"; Console.log (FC); // Execute phase, assign the FC variable to "FC variables"</script>

As you can see, even though the definition statement for the FC variable is after the FC function definition statement, the FC variable is pre-compiled at precompiled time, with the same name, and the pre-compilation overwrites the previous content

2) Note that the variables in JS can be implicitly created, but such variables should not be precompiled, similar to the following form will be error;

<script type= "Text/javascript" >console.log (c); // uncaught referenceerror:cis not defined C =5; </script>

Also, variables implicitly created in a local code block are used as global variables

3) Finally, JS is executed in chunks of the <script> code block, and the variables in the previous script block still apply in the next script, and vice versa.

<script type= "Text/javascript" >var a = 2; Console.log (c); // uncaught referenceerror:cis not defined </script><script type= "Text/javascript" >var c = 5; Console.log (a); // 2</script>

The feeling of personal understanding is still somewhat out of the way, what is wrong and I hope you Dalao

Personal understanding of JavaScript precompilation