A brief discussion on closures in js_javascript skills-JS Tutorial-php.cn

A brief discussion on closures in js_javascript skills

WBOY

Release： 2016-05-16 16:09:21

Original

1194 people have browsed it

First, let’s look at a piece of code:

Copy code The code is as follows:

111
222
333
var a=document.getElementsByTagName("a");
function b(){
　　for(var i=0;i 　　a[i].onclick=function(){
alert(i);
　　}　
}
}

According to the original intention of our design, clicking on an a tag should pop up the serial number of the tag accordingly, that is, clicking on the first a will pop up 0, clicking on the second a will pop up 1... But in fact it pops up. It is always the number of a tags. What is the reason? This problem has troubled me for a long time. I have consulted a lot of online information and reference books, and most of them are specious. I believe that many students do not understand the reasons. I will talk about my own understanding of this issue. If there is any inappropriateness, , please criticize and correct me.

From my personal understanding, the reason why the above function fails to achieve its purpose is that the event processing function is bound to the variable i, and the event processing function is assigned to onclick, which means that it is only activated when the a tag is clicked. This function will be called, so logically speaking, the function(){alert(i);} in a simple for loop is actually not executed, and when we click the a label, the for loop has already After execution is completed, the value of i at this time is the final value of the for loop. A simple understanding is that the value of i belongs to the b function, and the value of i we need is the value passed into the event processing function in real time. So is there any way to achieve our original design intention? Smart students may have guessed that it is to use closures.

Let’s look at another piece of code:

Copy code The code is as follows:

var a=document.getElementsByTagName("a");

function b(){

　　for(var i=0;i
　　　a[i].onclick=function(j){

　　　　return function(){

alert(j);

　　　}

　　}(i);

﻿}

}

b();

Executing the above code, you can find that the function we want has been implemented, that is, clicking on any a label will pop up the serial number where the label is located. Regarding the above code, I believe many students have seen many similar versions, but why can we achieve the functions we need by doing this? This is just my personal opinion. If there is anything wrong, please feel free to enlighten me.

The essence of the understanding of the above code is the understanding of variable i. In this code, the function executes to the for loop and finds an immediately called function. At this time, the real-time i variable value is passed to the immediately called function. The function is called immediately, and the event processing function also stores the real-time i variable value. .

The above is the entire content of this article. I hope it will be helpful to everyone in understanding js closures.