The most concise JavaScript closure explanation

the most concise JavaScript closure explanation

JavaScript is one of the hottest programming languages of the last few years, from the front-end to the server-side to the script, as if there was no JavaScript in place. The existence of any kind of things in this world must have its rationality, do not think that others are Xiaorendezhi, learn the advantages of the public to broaden their horizons, 've seen.

JavaScript closures are not easy to understand relative to a lot of traditional languages, in fact, it is not how difficult it is, because many of our friends have other language background, such as C + + or Java, this often may have some preconceived thinking, resulting in not easy to suddenly change over, In fact, a little accustomed to the good, we are experts, below we go straight into the subject.

What JavaScript closures are:

Simply said function, JavaScript function is actually equivalent to other languages of the object, if not specifically, the following I say the functions and objects are interchangeable, when all the functions are executed, because the inner layer of the function as a result returned, resulting in the outer object is still referenced, So the outer object is not freed, and the variables are still available.

Understanding the above, the following two examples are easy to understand.

First, the first piece of code, the output of this code is 10, because the Createfunctions function after the completion of the value of I is 10, the Createfunctions object is stored at this time I is the same, and the following code each time the output of the final object state i = 10, So the results are at a glance.

1            functioncreatefunctions () {2                 varresult =NewArray ();3                 4                  for(vari=0; I < 10; i++){5Result[i] =function(){6                         returni;7                     };8                 }9                 Ten                 returnresult; One             } A              -             varFuncs =createfunctions (); -              the             //every function outputs -              for(vari=0; i < funcs.length; i++){ -document.write (Funcs[i] () + "<br/>"); -}

Execution Result:

10101010101010101010

Let's look at the following code createfunctions the function finishes I is also 10, but the returned function uses its own local variable num each time, instead of the i=10 in the external object createfunctions, so the output is 0-9 each time.

1             functioncreatefunctions () {2                 varresult =NewArray ();3                 4                  for(vari=0; I < 10; i++){5Result[i] =function(num) {6                         return function(){7                             returnnum;8                         };9 } (i);Ten                 } One                  A                 returnresult; -             } -              the             varFuncs =createfunctions (); -              -             //function Outputs 1-9 -              for(vari=0; i < funcs.length; i++){ +document.write (Funcs[i] () + "<br/>"); -}

Execution Result:

0123456789

Summary

Through the understanding of these two pieces of code, I hope that everyone on the JavaScript closure by a new understanding, JavaScript closure is the language of JavaScript difficulties, but also one of its essence, I hope this article can help you, if you can have a little inspiration, the purpose of this article reached.

The most concise JavaScript closure explanation