Are you confused by the scope in js? Today we will sort out the system, first look at two examples
function show(){
var arr = new Array();
for(var i=0;i<5;i++){
arr[i] = function(){
return i;
}
}
return arr;
}
var a = show();
var num = a[2]();
document.write(num);
What is the value of output num, your answer is 2?
Congrats on your wrong answer! The answer should be 5.
I modified it again, look at the following program, what is the value of the output num?
function show1(){
var arr = new Array();
for(var i=0;i<5;i++){
arr[i] = (function(num){
return function(){
return num;
}
})(i);
}
return arr;
}
var a1 = show1 ();
document.write(a1[2]());
What is your answer, 2? Congratulations, you guessed it right. If you have given the correct answer to these two programs, you don't need to read the rest!
First let's look at the first question, block-level scope, function-level scope, and global scope in JS
function show(){
for(var i=0;i<5;i++){
}
document.write(i);
}
show();
What is the value of output i, children's shoes familiar with java may say that this will report an error. But here it will output 5
why?
There is no concept of block-level scope in js, only the concept of function-level scope and global scope. The i defined here is valid throughout the show function. After the for loop executes, the value of i becomes 5.
looking at another example
var color = "red";
function show(){
document.write(color);
var color = "blue";
}
show();
Is the output color red, blue, or something else? red, congratulations, you guessed wrong again!
This place is undefined!
Why? There are two scopes involved in this place, one is the global scope and the other is the function (show) scope. For each method defined in js, the js engine will help us encapsulate something called a variable object. This object contains an object such as argumengs by default, and one of them contains the variables you define in the function. Here is the var color = 'blue' you defined in the show method. So this variable object of our show method includes two variables, one is arguments, the other is color, and its value is blue.
In the show method document.write(color); There are two variables to choose from when accessing color, one is the global color whose value is red, and the other is the color in the show method whose value is blue. According to the js scope chain access principle, the color in the scope of the show method is accessed here, so it should output blue, but the code is executed from top to bottom. When you document.write(color), the color has not been assigned a value. Well, because the assignment statement is below, the output here is undifined! If you comment out var color = "blue"; in the function, document.write(color); outputs red. When accessing color, first check if there is a defined color in the function scope, if there is, access the function scope, if not, access the global scope.
With the above preparation, let's go back and talk about the two examples at the beginning. The show method in the first example defines two variables arr and i, plus arguments, that is to say, the variable object in the show method There are 3 variables.
First look at the array arr. There are 5 function objects stored in the array. These 5 function objects access the value of i of the variable object of the show method.
Under normal circumstances, when the function is called, the variable object of the function is automatically destroyed, but for the current example, the variable object of the show method cannot be released, because after the function is called, var a = show(); a variable holds arr this array. The function inside arr holds the variable object of the show method. The show method has only one variable object and only one i variable, so the functions in the a array access the variable i. After the loop ends, the value of i is 5, so the return value of the function in the array is all 5.
And in the second example from the beginning,
arr[i] = (function(num){
return function(){
return num;
}
})(i);
We pass the value through the function call, and pass the value of i to the variable num. When the show1 method is called, we no longer hold the i variable of the show1 method variable object. So the answer is 2.
Do you have a deeper understanding of scope in js.