Introduction to variable scope in JavaScript_javascript tips

For the scope of variables, languages ​​such as C and Java adopt the "block scope" method. Different from this, JavaScript adopts a "function scope" approach - the scope of a variable is only determined by the function it is located in, and has nothing to do with logical blocks such as if and for. For example, the following example shows the behavior in JavaScript that is different from C, Java and other languages:

Copy code 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 "block scope" languages ​​such as C and Java, after logical blocks such as if statements and for statements end, the variables defined within these logical blocks will be destroyed. JavaScript is different. As long as a variable is defined within a function, all code within the entire function can access the variable, even if these codes are before the variable is defined:

Copy code The code is as follows:

function(){
console.log(a);//undefined
var a = "test";
console.log(a);//test
}

In the above example, if a in function has never been defined, console.log(a) will throw a ReferenceError. When a is defined in a function, even if the definition is after the a variable calling statement, the call to a is a legal operation (if the definition of a variable occurs after the calling statement, then the value of the a variable in the calling statement is undefined ). In fact, for all variables defined with the var keyword within a function, the definition operation will be brought to the beginning of the function (the assignment operation will still remain on the line where var is defined). This is called hoisting in JavaScript. For example, the above code is equivalent to:

Copy code The code is as follows:

function(){
var a;
console.log(a);//undefined
a = "test";
console.log(a);//test
}

Scope chain of variables

Contact Storage of variables in JavaScript, you can have a good understanding of "function scope" and hoisting in JS. Since variables are stored in the global object or the function call object, when a variable is defined in a function, no matter where the variable is defined in the function, there will inevitably be a function call object with this value in the function call object. A property with the same name as the variable. In this way, the variable can be accessed from anywhere in the function.

When it comes to function calls, there is a more interesting concept in JavaScript: the scope chain of variables - because variables are stored in the global object or the function call object, when accessing the variable, you can access it from multiple objects. Get the value. Take the following code as an example:

Copy code 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".
}
}

Inside the level-2 function in the above code, when trying to access the x variable, the program can search for the corresponding attribute value from 3 objects: the function call object used to call the level-2 function, Function call objects and global objects used to call level 1 functions - Based on the nested relationship of function definitions, JavaScript will generate an object chain consisting 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 search will continue in the object at the upper level in the object chain until the global object.

Because this object chain is related to the scope of the variable, it is also called "scope chain".

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

Copy code 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 use of the with statement is not recommended.