Introduction to variable scopes in JavaScript _ javascript tips-js tutorial

This article mainly introduces the scope of variables in JavaScript. This article also describes the scope chain of A New Concept variable. For more information, see scope of variables ), c, Java and other languages adopt block scope. In contrast, JavaScript adopts the function scope method. The scope of a variable is determined only by the function and is irrelevant to logical blocks such as if and. For example, the following example shows how JavaScript performs differently from C, Java, and other languages:

The Code is as follows:

Function (){
Var s = 42; // s is visible throughout function
If (s> 3 ){
Var x = "test"; // x is visible throughout function
For (var I = 0; I <10; I ++ ){
Console. log (I );
}
Console. log (I); // I is visible throughout function
}
Console. log (I );
Console. log (x );
}

In C, Java, and other "block scope" languages, after the logic blocks such as if statements and for statements are completed, the variables defined in these logical blocks will be destroyed. JavaScript is different from that. As long as a variable is defined in a function, all code in the function can access the variable, even if the code is before the variable definition:

The Code is as follows:

Function (){
Console. log (a); // undefined
Var a = "test ";
Console. log (a); // test
}

In the preceding example, if function a is never defined, console. log (a) throws a ReferenceError. After a is defined for a in a function, the call to a is legal even after the variable calls the statement (if the definition of a variable occurs after the call statement, the value of variable a in the call statement is undefined ). In fact, all variables defined using the var keyword in a function will be taken to the beginning of the function (the value assignment operation remains on the line defined by var ), this is called hoisting in JavaScript. For example, the above Code is equivalent:

The Code is as follows:

Function (){
Var;
Console. log (a); // undefined
A = "test ";
Console. log (a); // test
}

Variable scope chain

By contacting the storage of variables in JavaScript, you can understand "function scope" and hoisting in JS. Because a variable is stored on a global object or function call object, when a variable is defined in a function, no matter where the variable is defined in the function, the function call object used for this function call must have an attribute with the same name as this variable. In this way, the variable can be accessed anywhere in the function.

When it comes to function calls, JavaScript also has a more interesting concept: variable scope chain-Because variables are stored on global objects or function call objects, when accessing variables, you can obtain values from multiple objects. The following code is used as an example:

The Code is as follows:

Var x = "test ";
Function (){
// Level-1 function
Var x = "temp ";
Function (){
// Level-2 function
Var x = "real ";
// Try to access x here. x will be "real ".
}
}

In the above Code, when an internal level-2 function attempts to access the x variable, the program can search for the corresponding attribute values from three objects: the function call object used to call Level 2 functions, the function call object used to call Level 1 functions, and the Global Object-according to the nested relationship defined by the function, javaScript generates an object chain composed of global objects and function call objects. When accessing a variable, the program will start searching from the object closest to the access statement. If no search is found, the program will continue searching from the object at the upper level in the object chain until the global object.

This object chain is also called "Scope chain" because it is related to the scope of the variable ".

If you need to temporarily change the scope chain and insert an object to the frontend of the scope chain (as the function object accessed first), you can use the with statement:

The Code is as follows:

With (o ){
// Code use properties of object o.
}

However, in JavaScript strict mode, the with statement is disabled. Even in non-strict mode, the with statement is not recommended.