Introduction to closures in js

Introduction to closures in js

Closure is a relatively abstract concept, especially for beginners of js. the explanation in the book is really obscure, and the same is true for me. closure is a feature of many languages. In js, closure mainly involves several other features of js: Scope chain, garbage (memory) collection mechanism, function nesting, and so on.

 

 

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

 

The Code is as follows:

<A href = "javascript: void (0);"> 111 </a>
<A href = "javascript: void (0);"> 222 </a>
<A href = "javacsrept: void (0);"> 333 </a>
Var a = document. getElementsByTagName ("");
Function B (){
For (var I = 0; I <a. length; I ++ ){
A [I]. onclick = function (){
Alert (I );
}
}
}

 

According to our original design intention, we should click a tag and the serial number of the tag will pop up accordingly, that is, click the first a to bring up 0, click the second to pop up 1... but the fact is that the number of a tags is always displayed. Why? This problem has plagued me for a long time. I have consulted many online materials and reference books, most of which seem to be incorrect. I believe many people do not know much about the reasons, I will talk about my understanding on this issue. If anything is inappropriate, please criticize and correct it.

In my personal understanding, the reason for the failure of the above functions is that the event processing function is bound to variable I, and the event processing function is assigned to onclick, that is to say, this function is called only when the tag is clicked. Therefore, logically, in a simple for loop, function () {alert (I );} this function is not actually executed. When we click the tag, the for loop has already been executed. At this time, the I value is the final state value after the for loop is executed. To put it simply, the I value belongs to the B function, and the I value we need is the value passed into the event processing function in real time. So what method can we achieve our original design intention? A clever person may have guessed it, that is, using closures.

Let's take a look at the code below:

 

The Code is as follows:

Var a = document. getElementsByTagName ("");
Function B (){
For (var I = 0; I <a. length; I ++ ){
A [I]. onclick = function (j ){
Return function (){
Alert (j );
}
} (I );
}
}
B ();

 

After executing the above code, we can find that the function we want has been implemented, that is, clicking any a tag will pop up the serial number of the tag. I believe many of my colleagues have read many similar versions of the above Code, but why can we achieve the functions we need by doing so? I am a little bit open-minded, if any, please do not give me any further advice.

The essence of the above Code is the understanding of variable I. In this Code, an immediate call function is found when the function is executed in the for loop. At this time, the real-time I variable value is passed to the immediate call function, and the function is called immediately, the event processing function stores Real-Time I variable values.

The above is all the content of this article. I hope it will be helpful for you to understand js closures.