1 a = 'ghostwu';
2 var a;
3 console.log( a );

Before I talk about what variable escalation is, and the rules of variable escalation, or you haven't learned about variable escalation, if you follow the existing javascript understanding, for the above example, you might think that the output of line 3 should be undefined, because the second line is var a; declare variables, but there is no assignment, so the value of a is undefined, but it's correct. The result is ghostwu. As for why, please keep looking down!

1 console.log( a );
2 var a = 'ghostwu';

For the example above, the first line of code, you might think that the error is reported, because there is no definition of a variable before output a, but the correct result is undefined. Well, it seems somewhat strange that javascript is too bug gy.

To find out why, we should first make clear the following two points:

• javascript code is not executed line by line.
• javascript execution is divided into two steps:
• Compiling (Lexical Interpretation/Pre-Interpretation)
• implement

Secondly, when we encounter var a = ghostwu to define a variable, js actually regards this sentence as two phases, var a occurs in compilation phase, a = ghostwu'occurs in execution phase. Then var a will be promoted to the front of the current scope, and a = ghostwu'stays in situ waiting for execution phase, so:

1 a = 'ghostwu';
2 var a;
3 console.log( a );
4 
5 //After compiling the above code, it becomes as follows
6 
7 var a;  //Promoted to the front of the current scope
8 a = 'ghostwu'; //Stay where you are and wait for execution
9 console.log( a ); 

1 console.log( a ); 
2 var a = 'ghostwu';
3 
4 //The above code,After compiling, it becomes as follows
5 
6 var a;
7 console.log( a );
8 a = 'ghostwu';

After reading the compiled code, do you understand?

Before we move on to the following, let's define two common ways of defining functions:

1         //Function declaration, Form like:
2         function show(){
3             console.log( 'Function declaration' );
4         }
5 
6         //Functional expression, Form like:
7         var show = function(){
8             console.log( 'Expressions' );
9         }

Because expressions and function declarations have different interpretative effects in the compilation stage.

1         show();
2         function show(){
3             console.log( a );
4             var a = 'ghostwu';
5         }

For the above code, in the compilation phase, how to explain it? Just remember the following sentence:

Function declarations will be promoted

So the above code, after compiling, becomes the following:

       function show(){    //Function declarations are promoted to the front of the current scope
            var a;    //var The declaration is raised to the top of the current scope, Note that he will not be raised outside the function., Because the current scope is in the function
            console.log( a );
            a = 'ghostwu';
        }
        show();

So the result is undefined.

For functional expressions, they will not be promoted. Look at the following examples:

 1 show(); //Report errors,show is not a function
 2 var show = function(){
 3  console.log( 'ghostwu' );
 4 }
 5 //For the above expression code, after compilation:
 6 var show;
 7 show();  //After execution undefined(), So before the expression definition, the calling function reported an error.
 8 show = function(){
 9   console.log( 'ghostwu' );  
10 }

1         show(); //Hello
2         var show;
3         function show(){
4             console.log( 'Hello' );
5         }
6         show = function(){
7             console.log( 'hello' );
8         }

Why is the result of the above code'Hello'?

Because: when a function declaration with the same name appears and a variable declaration occurs, the function declaration will be promoted first, and the variable declaration will be ignored. So after compiling, it becomes:

1         function show(){
2             console.log( 'Hello' );
3         }
4         show(); //Hello
5         show = function(){
6             console.log( 'hello' );
7         }
8         show();//If it's called here once, it's hello, because show Function bodies are reassigned at run time    

If there is a function declaration with the same name, the latter will override the former, as follows:

 1         show(); //how are you
 2         var show;
 3         function show(){
 4             console.log( 'hello' );
 5         }    
 6         show = function(){
 7             console.log( 'Hello' );
 8         }
 9         function show(){
10             console.log( 'how are you!' );
11         }
12 //After compiling, the above code becomes as follows:
13         function show(){
14             console.log( 'how are you!' );
15         }
16         show(); //how are you
17         show = function(){
18             console.log( 'Hello' );
19         }
20         show(); //If you execute it again here, the result is: Hello.