JavaScript scopes and scope chains

1. Scope

Scope, which refers to a code space that has access to a variable and method. When we define variables, we define two variables, a variable defined in a global context, called a global variable, and a variable defined in a function called a local variable. The scope of a global variable is the global environment, and the scope of the local variable is the function.

2. Scope Chain

The JavaScript Advanced Programming book writes that when code executes in an environment, a scope chain of variable objects is created. The purpose of a scope chain is to ensure an orderly access to all variables and functions that the execution environment has access to. The front end of the scope chain, which is always the variable object for the environment in which the code is currently executing. The next variable object in the scope chain comes from the containing (external) environment, and the next variable comes from the next containment environment, which continues to the global execution environment; The variable object of the global execution environment is always the last object in the scope chain.

To put it simply, when I look for a variable, I will find it in my own environment, I can't find the extension chain to the outer layer of the environment, find out again, and find the global execution environment.

Look at a short piece of code:

　　

1 varColora = "Red";2     functionABC () {3         varColorb = "Blue"; 4         functioninfo () {5              varcolor = "Yellow";6Console.log (Colora);-------17Console.log (Colorb);-------18Console.log (COLORC);-------19        };Ten info (); OneConsole.log (Colora);-------2 AConsole.log (Colorb);-------2 -Console.log (COLORC);-------2 -     }; the ABC (); -Console.log (Colora);-------3 -Console.log (Colorb);-------3 -Console.log (COLORC);-------3

In the above code, you can find that the three colors A, B, and C, labeled 1, can be correctly found and printed out. When tagged with 2, only A and B colors can be found. With a mark of 3, only a color can be found.

The reason for this is that to find the value of the variable, it is to look for its own environment, not found, when the scope chain to the outer look, so the inner layer can access to the outer defined variables, the outer layer is not access to the inner layer defined variables.

3. Block-level scopes and function scopes

We've all heard that Javscript is not a block-level scope, and JavaScript performs a function scope, so what is a block-level scope?

Any set of statements in a pair of curly braces ({and}) belongs to a block, and all variables defined in it are not visible outside the code block, which we call a block-level scope.

What is a function scope?

Simply put, the arguments and variables in the function are not visible outside the function and are accessible only within the function.

Why do you say JavaScript does not have block-level scopes, look at the following code:

　　

1 var color= "Red";   2 if (true) {  3     var color = "Blue";   4 5}        6 console.log (color);

Will find that two output is blue, if there is a block-level scope, if the color will be created as a local variable, this way the output is "blue", "red", because there is no block-level scope, If the assignment of color is treated as a global variable, the original value is overwritten, so the output will be two blue;

4. Variable declaration Promotion

Let's look at a small piece of code, what do you think the output is:

　　

1 varA = 100; 2 functionTestResult () {3   varb = 2 *A; 4   varA = 200; 5   varc = A/2; 6 Console.log (b); 7 Console.log (c); 8 }    9TestResult ();

Let's take a look at the output of these lines of code first, regardless of what the above output is;

Console.log (a); var a = 123; Undefined

Console.log (a); var A; Undefined

var a = 123;console.log (a); 123;

This occurs because the variable declaration is promoted, and when we declare a variable, the JavaScript engine declares the variable "in advance" and assigns the assignment in its original order.

So Console.log (a); var a = 123; the execution order is actually VAR A; Console.log (a); A = 123;

So output a when the variable has not been assigned to the value, so the output is undefined;

Now let's take a look at the execution order of that code, actually:

　　

1 varA = 100; 2 functionTestResult () {3     varb; 4     varA; 5     varC;6b = 2 * A;//A is found in the local variable, so the global variable a = 100 is not looked up, but a is not yet assigned, a is undefined, so B is Nan;7A = 200;8c = A/2;//100; 9Console.log (b);//NaNTenConsole.log (c);// - One }     ATestResult ();

Note: To undefined as subtraction will convert it to a number type, undefined into a number type is Nan;

So the output is NaN and 100;

　　

JavaScript scopes and scope chains