A deep understanding of the variable scope of JavaScript

Document directory

• 1. JavaScript scope chain
• 2. In the function body, the priority of local variables is higher than that of global variables with the same name.
• 3. JavaScript does not have block-level scope.
• 4. variables declared in the function are defined throughout the function.
• 5. Variables not defined using the var keyword are global variables.
• 6. global variables are all properties of the window object.
• 1. JavaScript scope chain
• 2. In the function body, the priority of local variables is higher than that of global variables with the same name.
• 3. JavaScript does not have block-level scope.
• 4. variables declared in the function are defined throughout the function.
• 5. Variables not defined using the var keyword are global variables.
• 6. global variables are all properties of the window object.

A deep understanding of the variable scope of JavaScript

Before learning the scope of JavaScript variables, we should clarify the following points:

• The scope of JavaScript variables is based on its unique scope chain.
• JavaScript has no block-level scope.
• The variables declared in the function are defined throughout the function.

1. Javascript scope chain

First, let's take a 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 the inner function} Rainman (); // call The Rainman function </SCRIPT>

Observe the alert (rain); Code. JavaScript first searches for whether the variable rain is defined in the inner function. If the variable rain is defined, use the rain variable in the inner function. If the variable rain is not defined in the inner function, javaScript will continue to search for whether the rain variable is defined in The rainman function. In this Code, if the rain variable is not defined in the rainman function, the JavaScript engine will continue to go up (Global object) check whether rain is defined. In the global object, we define rain = 1, so '1' is displayed in the final result '.

Scope chain: When JavaScript needs to query a variable x, it first looks for the first object of the scope chain. If the first object does not define the x variable, JavaScript will continue to look for whether the x variable is defined, if the second object is not defined, the search will continue, and so on.

The above Code involves three scope chain objects: inner, rainman, and window.

2. In 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; // defines the global variable rain function check () {var rain = 100; // define the local variable rain alert (rain); // The 100} check (); alert (rain) will pop up here; // 1 will pop up here </script>

3. JavaScript does not have block-level scope.

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

Observe the following code carefully and you will find that the variables I, j, and k have the same scope. They are global throughout the rain function.

<SCRIPT type = "text/JavaScript"> function Rainman () {// The Rainman function contains three local variables: I j k var I = 0; if (1) {var J = 0; For (var k = 0; k <3; k ++) {alert (k); // 0 1 2} alert (k) are displayed respectively ); // pop up 3} alert (j); // pop up 0} </SCRIPT>

4. variables declared in the function are defined throughout the function.

First, observe this Code:

<SCRIPT type = "text/JavaScript"> function rain () {var x = 1; function man () {x = 100;} Man (); // call man alert (x); // The 100} rain () will pop up here; // call rain </SCRIPT>

The code above demonstrates that variable x can be used in the entire rain function and can be assigned a value again. This rule produces "Incredible" results and observes the following code.

<Script type = "text/javascript"> var x = 1; function rain () {alert (x); // The 'undefined' dialog box appears ', instead of 1 var x = 'rain-Man'; alert (x); // The 'rain-Man'} rain (); </script>

It is because the local variable x in the function rain is defined in the whole function (var x = 'rain-man ', which is declared ), therefore, the global variable x with the same name is hidden in the entire rain function. Here, 'undefined' is popped up because the local variable x is not initialized when the first alert (x) is executed.

Therefore, the above rain function is equivalent to the following 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; // declares the global variable x and assigns a value to it.} rain (); alert (x ); // 100 is displayed. </script>

This is also a common error for beginners of JavaScript. Many global variables are left unintentional.

6. global variables are all properties of the window object.

<SCRIPT type = "text/JavaScript"> var x = 100; alert (window. X); // The 100 alert (X) is displayed. </SCRIPT>

Equivalent to the following code:

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

From: http://www.cnblogs.com/rainman/archive/2009/04/28/1445687.html

Before learning the scope of JavaScript variables, we should clarify the following points:

• The scope of JavaScript variables is based on its unique scope chain.
• JavaScript has no block-level scope.
• The variables declared in the function are defined throughout the function.

1. Javascript scope chain

First, let's take a 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 the inner function} Rainman (); // call The Rainman function </SCRIPT>

Observe the alert (rain); Code. Javascript first searches for whether the variable rain is defined in the inner function. If the variable rain is defined, use the rain variable in the inner function. If the variable rain is not defined in the inner function, javascript will continue to search for whether the rain variable is defined in The Rainman function. In this Code, if the rain variable is not defined in the Rainman function, the JavaScript engine will continue to go up (Global object) check whether rain is defined. In the global object, we define rain = 1, so '1' is displayed in the final result '.

Scope chain: When JavaScript needs to query a variable X, it first looks for the first object of the scope chain. If the first object does not define the X variable, JavaScript will continue to look for whether the X variable is defined, if the second object is not defined, the search will continue, and so on.

The above Code involves three scope chain objects: inner, Rainman, and window.

2. In 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; // defines the global variable rain Function check () {var rain = 100; // define the local variable rain alert (rain); // The 100} Check (); alert (rain) will pop up here; // 1 will pop up here </SCRIPT>

3. JavaScript does not have block-level scope.

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

Observe the following code carefully and you will find that the variables I, j, and K have the same scope. They are global throughout the rain function.

<Script type = "text/javascript"> function rainman () {// The rainman function contains three local variables: I j k var I = 0; if (1) {var j = 0; for (var k = 0; k <3; k ++) {alert (k); // 0 1 2} alert (k) are displayed respectively ); // pop up 3} alert (j); // pop up 0} </script>

4. variables declared in the function are defined throughout the function.

First, observe this Code:

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

The code above demonstrates that variable x can be used in the entire rain function and can be assigned a value again. This rule produces "Incredible" results and observes the following code.

<Script type = "text/javascript"> var x = 1; function rain () {alert (x); // The 'undefined' dialog box appears ', instead of 1 var x = 'rain-Man'; alert (x); // The 'rain-Man'} rain (); </script>

It is because the local variable x in the function rain is defined in the whole function (var x = 'rain-man ', which is declared ), therefore, the global variable x with the same name is hidden in the entire rain function. Here, 'undefined' is popped up because the local variable x is not initialized when the first alert (x) is executed.

Therefore, the above rain function is equivalent to the following 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; // declares the global variable x and assigns a value to it.} rain (); alert (x ); // 100 is displayed. </script>

This is also a common error for beginners of JavaScript. Many global variables are left unintentional.

6. global variables are all properties of the window object.

<Script type = "text/javascript"> var x = 100; alert (window. x); // The 100 alert (x) is displayed. </script>

Equivalent to the following code:

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

From: http://www.cnblogs.com/rainman/archive/2009/04/28/1445687.html