JavaScript Note Closure (Closures)

Closures is functions that refer to independent (free) variables.

Closures are a function that stores all parent scopes in a static/lexical manner

In JavaScript advanced programming, a diagram of the relationship between a createcomparisonfunction () function and the scope chain of the function is clearly illustrated to understand why closures can access variables of external functions, Because the scope chain of a closure includes not only its own local active object, but also the active object that the outer function scope chain points to.

In JavaScript advanced programming, JavaScript pristine has a similar example of creating closures in loops.

(for testing, make a little change)

1 varfn =function() {2     varresult = [];3      for(vari = 0; I < 3; i++) {4Result[i] =function() {5 Console.log (i); 6         };7     }8     returnresult;9 }; Ten  One varList =fn (); AList[0](); 3 -List[1](); 3
 -LIST[2] (); 3

1 varfn =function() {2     varresult = [];3      for(vari = 0; I < 3; i++) {4Result[i] = (function(num) {5             return function() {6 console.log (num);7             };8 }) (i);9     }Ten     returnresult; One };  A   - varList =fn (); -List[0] ();//0 theLIST[1] ();//1 -LIST[2] ();//2

At that time, in order to let myself know more thoroughly, I also drew out the scope chain, hoping to be useful to some students

First function scope diagram:

From the scope diagram of the first function, we can see that each function in the array is printed 3 because each function cannot find I in the local active object, so I continue to find I in the active object of the external function, but at this time I at the end of the loop value is 3, so each function prints 3

A second function scope diagram:

The second function assigns an immediately executing function to the result array and passes in the I so that at this time the active object of result[x] is more than one variable num value is I (the function parameter is passed by value) so the returned function prints num when result[x is found according to the scope chain) Num in the active object and prints the value of num

By drawing the scope chain diagram of these two functions, we can clearly understand how closures work, and will not be so afraid of closures!

PS. The above two examples in JSLint will be error: Don ' t make functions within a loop

So let's not use this in the actual program. You can use the loop outside the variable to define the function and then in the loop.

Finally attach Sublime-text 3 How to install Sublimelinter tutorial http://www.sublimelinter.com/en/latest/installation.html

If there is an error, please correct me:)

JavaScript Note Closure (Closures)