1024programmer Java How JavaScript closure functions access external variables_javascript tips

How JavaScript closure functions access external variables_javascript tips

A closure refers to a function that has access to 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.

For example, the following cases:

 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]()+"
"); }

Execution results:

JS Closure

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 a 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]()+"
"); }

Execution results:

JS Closure

Define an anonymous function, and immediately assign the opportunity to execute the anonymous function to the array. 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.


 
 
 
 
 
 
 
 

Click the results of each button

JS Closure

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 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


 
 
 
 
 
 
 
 

Click the second one

JS Closure

Click on the fourth one

JS Closure

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.

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/629640

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us

181-3619-1160

Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top
首页
微信
电话
搜索