A personal understanding of the lexical scope and variable promotion of JavaScript

About the scope of JavaScript, recently heard a noun: " lexical scope "; have not heard before (reading less), record the understanding of this, deepen the impression.

Lexical scope: In JavaScript, the scope of a function is determined when the function is defined, so judging the function's upper-level scope is not where the function is called , but where the function is. not to be confused with this

A 1th example:

1 function fn (callback) {2     var age=18; 3     Callback ()4} 5 6 fn (function() {7    Console.log (age)  //  What results will be output here?  8 })

Parsing: When the 3rd line of code calls an anonymous function, the age variable is looked up at the scope range of the anonymous function, where the age variable is not found, and therefore the upper level of the anonymous function is looked for, and the emphasis is on what is the upper scope of the anonymous function? OK, here's a look at an example.

A 2nd example:

1 function fn (CB) {  2     var age=18; 3     CB ()  4} 5  6 function callback () {  7    Console.log (age)  //  What results will be output here?  8}  9 fn (callback);

Analysis: The second example, compared to the first instance, simply changed the anonymous function to the callback function. It is clear from the second example that the upper-level scope of the callback function is the global scope, which is window, and the age variable is not found within the scope of the callback function; The age variable is not found in the global scope window, so the output of the above two examples is the following error:

Summary: As can be seen from the two examples above, in JavaScript, what is the upper-level scope of a function? It is the lexical scope of JavaScript that needs to be declared in which scope and not at which scope the function is called.

A 3rd Example:

 1  var  x = "Globol value" ;  2  function   GetValue () { 3  console.log (x); //  What will be output here?  4  var  x = "Local value" ;  5  console.log (x); //  What will be output here?  6  }   7  getValue (); 

Analysis: Based on the lexical scopes of the previous two examples, the GetValue function is written in the global scope window, so it is possible to access the X variable of the window scope, which is supposed to be the result of: "Globol value" and " Local value "; However, before ES6, variables declared with Var, there will be a variable promotion to promote the variable declaration to the first part of its scope, similar to function declaration elevation (function declaration hoisting< Span class= "Fontstyle1"); So the 3rd example can be rewritten as the following code:

 1  var  x = "Globol value" ;  2  function   GetValue () { 3  var  x; //  Declares a variable, does not assign a value, the default value is undefined  4   Console.log (x);  5  x = "Local value" ;  6   Console.log (x);  7  }  8  GetValue (); 

So, the result of the 3rd example output is: Undefined and "local value" , if you want to output "Globol value" and "local value", then you can change to the following code:

1 var x = "Globol value"; 2 function GetValue () {3    console.log (window.x); 4     var x = "local value"; 5     Console.log (x); 6 }7

PS: In ES6, if you use the Let and const keywords to declare variables, there is no effect of variable promotion. Interested friends can execute the following code to see what the effect, to understand the results of the following example, you can go to see the Nanyi of the temporary dead zone of the teacher's description: http://es6.ruanyifeng.com/#docs/let

1 var x = "Globol value"; 2 function GetValue () {3    console.log (x); 4     Let x = "local value"; 5     Console.log (x); 6 }7 getValue ();

A personal understanding of the lexical scope and variable promotion of JavaScript