Closures are closely related to the scope of variables and their life cycle. Before we look at closures, let’s look at the scope of variables in JavaScript

What is a closure?

Closures are functions that have access to variables in the scope of another function.

To put it simply,

Javascript allows the use of internal functions – that is, function definitions and function expressions that reside inside a function of another function.

These inner functions have access to all local variables, parameters, and other inner functions declared in the outer function they are in.

When one of these inner functions is called outside the outer function that contains them. It’s going to form a closure.

Summarized as,

Closures have three features:

① Function nested function

② Inside a function can refer to parameters and variables outside the function

③ Parameters and variables are not collected by the garbage collection mechanism

The instance

function a(){
var i=0;
function b(){
　　alert(++i);
}
return b;
}

var c = a();
c(); 
Copy the code

This code has two characteristics:

1. Function B is nested inside function A;

Function A returns function B.

After executing var c=a(), variable C actually refers to function B, and after executing c(), a window will pop up showing the value of I (1 for the first time). This code actually creates a closure. Why? Because variable C outside function A refers to function B inside function A, that is:

A closure is created when function B inside function A is referenced by a variable outside function A.

The function of closures

Closures can be used in many ways. It is useful for two things: reading variables inside functions as mentioned earlier, and keeping the values of those variables in memory at all times.

1. Read local variables from outside

function f1(){var n=999;function f2(){alert (n); }returnF2; }varResult = f1 (); result();/ / 999
Copy the code

F2 can read local variables in F1, so as long as f2 is returned, we can read its internal variables outside f1

2. Keep the values of variables in memory

function f1(){var n=999; nAdd=function(){n+=1}function f2(){alert (n); }returnF2; }varResult = f1 (); result();/ / 999NAdd bring them any closer (); result();/ / 1000
Copy the code

In this code, result is actually the closure f2 function. It runs twice, the first with a value of 999 and the second with a value of 1000. This proves that the local variable n in function f1 is kept in memory and is not automatically cleared after f1 is called.

Why is that? The reason is that F1 is the parent of F2, and F2 is assigned to a global variable, which results in F2 always being in memory, and f2’s existence depends on F1, so F1 is always in memory and not collected by garbage collection when the call ends.

The pros and cons of closures

Benefits:

① Protect the security of variables in the function, achieve encapsulation, prevent variables into other environments occur naming conflicts

② Maintain a variable in memory, can do cache (but use too much is also a disadvantage, consume memory)

③ Anonymous self-executing functions can reduce memory consumption

The bad:

① Referenced private variables can not be destroyed, increase memory consumption, so can not abuse closure, otherwise it will cause performance problems in IE may lead to memory leaks, the solution is, before exiting the function, will not use local variables all delete.

(2) Because closures involve cross-domain access, there is a performance penalty. We can reduce the impact on execution speed by storing cross-scope variables in local variables and then accessing local variables directly

③ Closures change the values of variables inside the parent function. So, if you use a parent function as an object, a closure as its Public Method, and internal variables as its private values, be careful not to arbitrarily change the values of the parent function’s internal variables.

Iv. Reference materials

www.ruanyifeng.com/blog/2009/0…