Important concepts in JavaScript-closures-deep understanding

In the last share of javascript--function parameters and closures--in detail, the closure of the explanation is not deep enough. After a period of learning, I have a new understanding of the concept of closures. So the process of learning to organize into articles, one is to deepen their understanding of closure, the second is to provide readers with the way to learn, to avoid detours.

In the javascript--function parameters and closures--detailed in this article, I introduced the concept of closures in detail. The following basic concepts of sharing on closures will only be taken lightly. If you are unfamiliar with the concept of closure, please move to the javascript--function parameters and closures------detailed.

The following sharing will be divided into the following sections:

1.let command

2. Explanation of closure features

3. Closures in the loop

1.let command

　　Before talking about closures, it is necessary to talk about new concepts in ES6, let commands. This is because the Let command is used when the closure in the repeating loop.

　　Basic usage

　　ES6 added a let command to declare a variable. It is used in a similar way var , but the declared variable is let valid only within the code block where the command resides.

1     if (true) {2         var a = 1; 3         Let B = 2; 4     }5     //  16     ///  Referenceerror:b is not defined

In the javascript--function parameters and closures--in detail, the variables declared in the local variable can only be declared inside the function, and in other code (such as the IF condition statement, the FOR Loop statement) The Var declaration is a global variable.

In the above code, let two variables are used and var declared respectively. These two variables are then called outside of the code block, resulting in the let declared variable being an error, and the var declared variable returning the correct value. This indicates that the variable declared with VAR in the IF condition statement is a global variable and can be accessed under the global scope. Whereas a let declared variable is valid only in the code block where it resides, it cannot be accessed under the global scope.

Take a look at these two examples.

1      for (Let i = 0; i <; i++) {} 2     Console.log (i);  // referenceerror:i is not defined

1      for (var i = 0; i <; i++) {} 2     Console.log (i);  // Ten

2. Explanation of closure features

　　We know that closures have three features

A: Define another function inside a function.

B: Intrinsic functions can access local variables defined by external functions (variable with VAR declaration)

C: Allow local variables to always be stored in memory. In other words, closures can make the environment in which it is born exists.

　　Let's look at an example and try to string up these three features.

1     functionKeith () {2         varA = 1;3         return function() {4             returna++;5         }6     }7     varresult =Keith ();8Console.log (Result ());//19Console.log (Result ());//2TenConsole.log (Result ());//3

First, an anonymous function is returned inside the function Keith, and if the function Keith does not return a value, the default return value is undefined.

Then, because an anonymous function is returned in the function Keith, and the result of calling the function Keith is assigned to the global variable result, the global variable result is a closure. When result is called consecutively, it returns three to three. The return value illustrates that an intrinsic function can access local variables defined by an external function. In other words, the closure remembers the result of the invocation of the local variable defined by the external function.

Finally, because we assign a closure to a global variable result, the call is then output in turn. Illustrates that this local variable a, accessed outside of the function Keith, is always present in the global scope. That is, local variable A is always present in memory, so it is not recycled by the garbage collection mechanism.

So the point of note when using closures:

　　Because the closure will make the variables in the function are stored in memory, memory consumption is very large, so can not abuse closures, otherwise it will cause the performance of the Web page, in IE may lead to memory leaks. The workaround is to remove all unused local variables before exiting the function.

3. Closures in the loop

　A common error occurs when using closures in loops, assuming we need to call the loop ordinal in each loop.

1      for (var i = 0; i < i++) {2         setTimeout (function() {3             //4         }, +) 5     }

In the above code, it will not match our expectations, the output number 0-9. Instead, the number is output 100 times.

The reason for the error is that we define an anonymous function inside the settimeout function, where the function of the anonymous function is to output the variable i in the console, and the variable i is a global variable, which is valid at the global scope. So each time the loop, the new i value overwrites the old value, resulting in the final output of the last round of the value i .

Therefore, there are two workarounds for closures in loops.

One is to use the immediate execution function (Iife) and take i it as its parameter, when the e variable in the function has i a copy. When passed to setTimeout an anonymous function, it has a reference to it e , and this value is not changed by the loop.

 1  for  ( var  i = 0; I < 10; I++ 2  ( function    function   () { 4  Console.lo G (e); // 1,2,3,....,  5 }, 1000)  6   7 } 

The second is to make the variable I only valid in the code block. In other words, make it a local variable. The variable i is let declared, the current is i only valid in this cycle, so each cycle i is actually a new variable, so the final output is 1,2,3,4....,10.

1      for (Let i = 0; i < i++) {2         setTimeout (function() {3             // 1,2,3...,10 4         },5     }

　　

Finish.

Thank you for reading.

Important concepts in JavaScript-closures-in-depth understanding