A Preliminary Exploration of JavaScript - Understanding of Closures

foreword

Closure is a relatively esoteric concept in js, which needs to be well understood. Next, I will understand closure from various aspects.
First of all, a closure and an anonymous function are completely different concepts. A closure refers to a function that has access to variables in the scope of another function. It is actually a bridge between the inside of the function and the outside of the function. An anonymous function is a function without a name.

Use of closures

Let's first look at two examples:

var a = 10;
function fn(){
    alert(a);
};
fn();  //10

A global variable is defined outside and can be read inside the function fn.

function fn(){
    var a = 10;
};
alert(a); //a is not defined

A local variable is defined inside a function, which cannot be recognized outside.

Sometimes, we need to get the local variables inside the function externally, but it is impossible to do it under normal circumstances, so we need to use closures to achieve it.

function f1(){
    var a = 10;
    function f2(){
        alert(a);
    }
    return f2;
};
var result = f1();
result();  //10

In the above example, we define another function f2 inside the function f1. At this time, all the local variables inside f1 are visible to f2, but the local variables inside f2 are not visible to f1. At this time, because of the "chain effect" domain" structure. Then use f2 as the return value, and then you can read its internal variables outside f1.

Let's look at another example:

function f1(){
    var a = 10;
    add = function(){
        a = a+1;
    }
    function f2(){
        alert(a);
    }
    return f2;
};
var result = f1();
result();  //10
add();
result();  //11

In this code, result is actually the closure f2 function, which runs twice, and the values ​​are 10 and 11 respectively. This shows that the local variable a has been kept in the memory and has not been automatically cleared.
What is the reason for this? In fact, because f1 is the parent function of f2, and f2 is assigned to a global variable, f2 is always in memory, and the existence of f2 depends on f1, so f1 is also always in memory, and will not be called after the end of the call. The garbage collection mechanism recycles, so a is not cleaned up either.

After reading the above, we can summarize the usefulness of closures:

1. Read the variables inside the function;
2. Keep variables inside functions always in memory.
   

   ---

Summarize

Closure is a frequently used method. In order to prevent variable pollution and enhance encapsulation, when using it, you should also pay attention to the following:
1. Closure will make the variables in the function all stored in memory, and the memory consumption will be relatively large. , so the closure cannot be abused, otherwise it will cause performance problems and memory leaks in IE, so before exiting the function, delete all unused local variables (set the value to null).
2. The closure changes the value inside the parent function outside the parent function, so use the parent function as an object, use the closure as a public method, and use the internal variable as a private property, remember not to arbitrarily change the variables inside the function. value.