Closing scene understanding and application packages

1. What is a closure ? ?

Before looking at closure, we have to clear another js knowledge, that is, the scope chain . What is the scope chain, for example, a function which contains another function inside a function using a variable time will be to find this variable in the function their scope, if not, will be along to their superiors function scope chain scope to find, such a process we called the scope chain.

The scope chain is an internal function to external variables need to find, but not from top to bottom to find the variables inside a function, so this time there have been closures, the closure is to solve this problem. In simple terms, the closure is a can access another function of internal variables.

 1  function f1(){
 2             var n = 100
 3             function f2(){
 4                 n=n+100
 5                 console.log(n);  
 6             }
 7             return f2
 8         }
 9         var temp = f1()
10         temp() // 200

Created in the above code, a function f1 (), and in its interior creates a function f2 (), under normal circumstances, in the f2 accessible f1 variables n, but the variable f1 is not accessible f2 defined, but by f2 return it will return as a parameter to f1, f2 through closure to establish contact with the f1, f1 so that you can access the variables

Example 2.

 var aaa = (function(){
        var a = 1;
        function bbb(){
                a++;
                console.log(a);       
        }
        function ccc(){
                a++;
                console.log(a);   
        }
        return {
                b:bbb,             //json结构
                c:ccc
        }
    })();
    console.log(aaa.a);//undefined 
    aaa.b();     //2
    aaa.c()      //3

In the above code, due to closure of the variable and function it is not recovered after use, but continue to exist in memory, when the second use of the variable, its value should be changed after the first trial after values, therefore, aaa.c value (), is in aaa.b () on worth include adding 1 after use, the result is the final output 3

2. The closure application scenario

When we use the timer when setTimeout (function () {}, 1000) when the first parameter is a function, or a piece of code executed js, the second parameter is the time interval between executions of the first parameter.

When we need to first argument (the case here for the first parameter is a function) is a function, when you need to pass parameters of the Ha number, then you can use a closure:

 1  function f1(name) {
 2             var Name = name
 3             function f2() {
 4                 console.log(Name);
 5             }
 6             return f2
 7         }
 8         var arr = [1, 2]
 9         for (let i = 0; i < arr.length; i++) {
10             let num = arr[i]
11             var func = f1(num)
12             setTimeout(func, 1000);
13         }

The output of the above code: 1

Closure of the packaging variable scenarios:

. 1   var counter = ( function () {
 2          var privateCounter = 0; // private variables 
. 3          function Change (Val) {
 . 4              privateCounter + = Val;
 . 5          }
 . 6          return {
 . 7              INCREMENT: function () {    // three closure sharing a lexical environment 
. 8                  Change (. 1 );
 . 9                  the console.log (privateCounter);
 10                  
. 11              },
 12 is              Decrement: function () {
 13 is                 change(-1);
14                 console.log(privateCounter);
15 
16             },
17             value:function(){
18                 return privateCounter;
19             }
20         };
21     })();
22 
23     console.log(counter.value());//0
24     counter.increment();//1
25     counter.increment();//2

Closure Summary:

1. The closure is a can access another function of the internal variable

2. The general function after use, the internal variables are recovered and the closure does not, the variable is still in memory, will not disappear.

3. The closure of frequent use will take up memory, CPU performance reduced, but the memory can be released (after completion of the use of closures, manually variable to null)

Closing scene understanding and application packages

Guess you like