Deep understanding of JavaScript variable scopes

Before learning about the variable scope of JavaScript, we should make a few clear points:

A, the variable scope of JavaScript is based on its unique scope chain.

b, JavaScript does not have a block-level scope.

c, the variables declared in the function are defined throughout the function.

1. The scope chain of JavaScript

First look at the following code:

1234567891011121314

<script type="text/javascript"language="javascript">varrain = 1;function rainman(){    varman = 2;    functioninner(){        varinnerVar = 4;        alert(rain);    }    inner();    //调用inner函数}rainman();    //调用rainman函数</script>

Observe the alert (rain); this code. JavaScript first looks in the inner function to see if the variable rain is defined, and if defined, uses the rain variable in the inner function, and if the rain variable is not defined in the inner function, JavaScript continues to look for a rain variable in the Rainman function, where the rain variable is not defined in the Rainman function body, and the JavaScript engine continues to look up (the global object) to see if rain is defined. In the global object we define rain = 1, so the final result will pop up ' 1 '.

Scope chain: When JavaScript needs to query a variable x, it first looks for the first object in the scope chain, and if the x variable is not defined with the first object, JavaScript continues to find out if the x variable is defined, and if the second object does not have a definition, it will continue to find, and so on.

The above code involves three scope chain objects, followed by: Inner, Rainman, window.

2, inside the function body, the local variable priority is higher than the global variable with the same name

1234567891011

<script type="text/javascript"language="javascript">varrain = 1;    //定义全局变量 rainfunctioncheck(){    var rain = 100;    //定义局部变量rain    alert( rain );    //这里会弹出 100}check();alert( rain );    //这里会弹出1</script>

3. JavaScript does not have block-level scopes.

This is also part of JavaScript that is more flexible than other languages.

Looking closely at the code below, you will find that the variables I, j, K scopes are the same, they are global in the entire rain function body.

123456789101112131415161718

<script type="text/javascript"language="javascript">functionrainman(){/** * rainman函数体内存在三个局部变量 i j k */    var i = 0;    if( 1 ){        varj = 0;        for( vark = 0 ; k < 3 ; k++ ){            alert( k );    //分别弹出 0 1 2        }        alert( k );    //弹出3    }    alert( j );    //弹出0} </script>

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

First, look at this piece of code.

12345678910111213

<script type="text/javascript"language="javascript">functionrain(){    varx = 1;    functionman(){        x = 100;    }    man();    //调用man    alert( x );    //这里会弹出 100}rain();    //调用rain</script>

The code above shows that the variable x can be used throughout the rain function and can be re-assigned. As a result of this rule, it will produce "unthinkable" results, observe the following code.

1234567891011

<script type="text/javascript"language="javascript">varx = 1;functionrain(){    alert( x );    //弹出 ‘undefined‘，而不是1    varx = ‘rain-man‘;    alert( x );    //弹出 ‘rain-man‘}rain()</script>

This is because within the function rain the local variable x is defined in the entire function body (var x= ' Rain-man '), so the global variable x with the same name is hidden within the entire rain function body. The reason why ' undefined ' pops up here is that the local variable x is still not initialized when the first alert (x) is executed.

So the rain function above is equivalent to the following function.

123456

functionrain(){    varx;    alert( x );    x = ‘rain-man‘;    alert( x );}

5. Variables that are not defined with the VAR keyword are global variables.

1234567

<script type= "Text/javascript"  language= Code class= "JavaScript string" > "javascript" > function  rain () { &NBSP;&NBSP;&NBSP;&NBSP; x = 100;    //declares the global variable x and assigns the value } rain (); alert (x);    //pop-up </SCRIPT>

This is also a common mistake for JavaScript novices, leaving many global variables unintentionally.

6, global variables are properties of the Window object

12345

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

Equivalent to the following code

12345

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

Deep understanding of JavaScript variable scopes