JavaScript Closure Learning Note (ife2015spring)

Nanda's articles have benefited me a lot. Learn JavaScript closures (Closure)

Problem:

In the words of doing task2 little exercise 4 round the picture encountered a problem. The original is to press which button to play to the corresponding picture. But actually the last value comes out at 5.

For example, here is a simplified example.

 for (var i=1;i<5;i++) {    E[i].onclick=function() {        console.log (i);    };}

This thought press the first pop-up, press the second pop-up 2. But actually all popped up is 5. Black question mark face?

This is where the JS pits are. Since the For loop is finished, its i is not immediately destroyed. Instead, the final result of the loop is left outside the loop. So at this point you don't care which button you press, it pops up with the final result 5.

So how do you change this situation? The following is the closure of the method, do not say what is a closure, first see how to implement a closure, and closure to solve the problem.

for (Var i=1;i<5;i++) {e[i].onclick= (function (a) {return function () {console.log (a);}}) (i)}

This code, in the body of the loop added a function, in fact, each time you trigger the OnClick event, call the outside of our newly added function, each time the function is run, will request an I value, then can reach one by one corresponding purpose. This newly added function is also called a closure.

This function looks more complex, and the following code is equivalent to it.

for (Var i=1;i<5;i++) {var fn=function (a) {Console.log (a);} E[I].ONCLICK=FN (i);}

This is not a good understanding of a lot. Call the function once per click, so you can achieve your goal.

Closures:

There's so much to say about closures. I think it's just a collection of internal variables. Because internal variables outside the body of the function are not available. You want to get it, only by means of closures, closures are the set of internal variables. It does this by adding a sub-function inside the function (simply by nesting a function inside the function). The internal function can get the variable inside the function, and return the nested function, when you call the nested function outside the body of the function to achieve the purpose of calling the local variable.

function F1 () {    var name= ' Webwhitecoder ';     var f2=function() {        console.log (name);    };
return F2;} var result=F1 (); result ();//webwhitecoder

Other uses of closures:

Closures are mainly used for two purposes, the first of which is to get the internal variable value of the function in the previous example, and the other is to let the value of the variable remain in memory. Before the JS elevation when the introduction of JS garbage cleanup, JS after the function call is finished, will automatically remove the unused variables. But if there are times when we want to keep it from being erased, we have to use the closure method.

The following is an example of Ruan da:

function　　　　F1 () {  var n=999;　　　　Nadd=function() {n+=1}  function  f2 () {alert (n);　　}  return  F2; }  var result=//  999//  

The result is that n is always in memory, and it is not as clear as garbage after F2 has run out. Because F2 is a child function of F1, F2 is assigned to a global variable n (relative to the function body F1), so F2 is always in memory, and because F2 is dependent on F1, F1 is also in memory, which guarantees the normal invocation of the Nadd function.

But also see, the implementation of closures will consume memory, affect performance, so unless necessary, try to use less.

JavaScript Closure Learning Note (ife2015spring)