In depth parsing of variable scopes in JavaScript

Before we learn about JavaScript's variable scope, we should make a few points clear:

The & # 8226; JavaScript's variable scope is based on its unique scope chain.

The & # 8226; JavaScript has no block-level scope.

The & # 8226; Variables declared in a function are defined throughout the function.

1. Scope chain of JavaScript
First look at the following code:

<script type="text/javascript"> var rain = 1; function rainman(){ var man = 2; function inner(){ var innerVar = 4; alert(rain); } inner(); // call inner function  } rainman(); // call rainman function </script>

Alert (rain); This code. JavaScript first looks inside the inner function to see if the variable rain is defined, and if so, USES the rain variable in the inner function. If the rain variable is not defined in the inner function, JavaScript will continue to look for the rain variable in the rainman function. If the rain variable is not defined in the rainman function in this code, the JavaScript engine will continue to look up (the global object) to see if rain is defined. In the global object we defined rain = 1, so the end result will pop out '1'.

Scope chain: when JavaScript needs to query a variable x, it will first look for the first object in the scope chain. If the x variable is not defined by the first object, JavaScript will continue to look for the definition of the x variable. If the second object is not defined, it will continue to look for the definition of the x variable, and so on.

The code above involves three scoped chain objects, inner, rainman, and window.

2. Inside the function body, the priority of local variables is higher than that of global variables with the same name.

<script type="text/javascript"> var rain = 1; // Define global variables  rain function check(){ var rain = 100; // Define local variables rain alert( rain ); // It will pop up here  100 } check(); alert( rain ); // It will pop up here 1</script>

3. JavaScript has no block-level scope.

This is also part of JavaScript's flexibility compared to other languages.

If you look closely at the code below, you will see that the scope of variables I, j, and k is the same, and they are global in the whole body of the rain function.

<script type="text/javascript"> function rainman(){ // rainman There are three local variables in the body of the function  i j k var i = 0; if ( 1 ) { var j = 0; for(var k = 0; k < 3; k++) { alert( k ); // The pop-up, respectively,  0 1 2 } alert( k ); // The pop-up 3 } alert( j ); // The pop-up 0 }</script>

4. Variables declared in a function are defined throughout the function.

First look at this code:

<script type="text/javascript"> function rain(){ var x = 1; function man(){ x = 100; } man(); // call man alert( x ); // It will pop up here  100 } rain(); // call rain</script>

The code above shows that the variable x can be used in the entire body of the rain function and can be re-assigned. As a result of this rule, the result is "unthinkable." look at the following code.

<script type="text/javascript"> var x = 1; function rain(){ alert( x ); // The pop-up  'undefined' Rather than 1 var x = 'rain-man'; alert( x ); // The pop-up  'rain-man' } rain();</script>

Because the local variable x in the function rain is defined in the whole function body (var x= 'rain-man', declared), the global variable x with the same name is hidden in the whole function rain. The reason 'undefined' pops up here is because the local variable x is still not initialized when the first alert(x) is executed.

So the top rain function is the same as the bottom function:

function rain(){ var x; alert( x ); x = 'rain-man'; alert( x );}

5. Variables not defined using the var keyword are global variables.

<script type="text/javascript"> function rain(){ x = 100; // Global variables are declared x And assign values  } rain(); alert( x ); // Will pop up 100 </script>

This is also a common error among JavaScript novices, leaving many global variables unintentional.

6. Global variables are properties of the window object

<script type="text/javascript"> var x = 100 ; alert( window.x );//The pop-up alert 100 (x); </ script>

Equivalent to the following code

<script type="text/javascript"> window.x = 100; alert( window.x ); alert(x)</script>