How JavaScript closure functions access external variables_javascript tips

A closure refers to a function that has the right to access variables in the scope of another function. However, there is one thing to note about the scope configuration mechanism, that is, the closure can only obtain the last value of any variable in the containing function.

Such as the following case:

function create(){
    var arr = new Array();  
 
    for (var i=0; i<10; i++){
        arr[i] = function(){
            return i;
        };  
    }
 
    return arr;
}
 
var c_arr = create();
 
for(var i=0; i<c_arr.length;i++){
    document.write("c_arr["+i+"] = "+c_arr[i]()+"<br />");    
}

Execution result:

On the surface, it seems that the i value returned by each function is different. For example, the value of c_arr[0] should be 0, the value of c_arr[1] should be 1, and so on. As a result, each function returns 10. Why?

Because the active object of the create() function is stored in the scope chain of each function, they all refer to the same variable i. When the for loop ends, the value of i becomes 10. At this time, each function refers to the same variable object that holds variable i.

We can force the closure to behave as expected by creating another domain name function so that each position corresponds to the corresponding value.

function create(){
    var arr = new Array();  
 
    for (var i=0; i<10; i++){
        arr[i] = function(num){
            return function(){
                return num; 
            };
        }(i);   
    }
 
    return arr;
}
 
var c_arr = create();
 
for(var i=0; i<c_arr.length;i++){
    document.write("c_arr["+i+"] = "+c_arr[i]()+"<br />");    
}

Execution result:

An anonymous function is defined, and the mechanism for executing the anonymous function is assigned to the array immediately. The anonymous function here has a parameter num, which is the value to be returned by the final function. We pass in the variable i when calling each function. Since function parameters are passed by value, the current value of variable i will be assigned to parameter num. Inside this anonymous function, a closure that accesses num is created and returned. In this way, each function in the arr array has a copy of its own num variable, so it can return different values.

Classic example

Let’s look at a classic example again. Assume that the page has a set of button tags. We use a script to bind click events to this set of button tags, and when clicked, which number of tags will pop up.

<meta charset="utf-8" />
 
<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<button>第四个</button>
 
 
<script type="text/javascript">
 
var obj = document.getElementsByTagName('button');
for(var i=0;i<obj.length;i++){
    obj[i].onclick = function(){
        alert(i);
    };  
}
 
</script>

Click each button result

On the surface, it seems that clicking each label should pop up a different number

The first one should pop up with 0;

The second one should pop up with 1;

And so on.

But the result is that all buttons pop up 4, which is obviously not the result we want.

Let’s change the program

<meta charset="utf-8" />
 
<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<button>第四个</button>
 
 
<script type="text/javascript">
 
var obj = document.getElementsByTagName('button');
for(var i=0;i<obj.length;i++){
    obj[i].onclick = function(num){
        return function(){
            alert(num);
        }       
    }(i);       
}
 
</script>

Click on the second one

Click on the fourth one

We only need to create an anonymous function within the function, the same as the above case. You can implement an anonymous function to capture the external variable i. As a result, the i value of each button bomb is different.