The concept and usage of closures in JavaScript deep understanding of _javascript skills

In this paper, we analyze the concept and usage of closures in JavaScript. Share to everyone for your reference, specific as follows:

1. What is the problem when you meet the closure?

First, because JS is not a block scope, but the function of the scope that is the function as the boundary between the local variables, the different functions of the local variables are independent,

Because JS does not have a block scope, the author of the beginner JS, in the event of the monitoring, because do not understand the scope of JS local variables, made a lot of mistakes!

(1) Scope of variables in JS

for (Var i=0;i<9;i++)
{
}
alert (i)//output 9

We found that although the variable i is a local variable within the block area for (), we can still get the variable i

(2) function scopes in JS

Function abc () {
 var a=1;
}
ABC ();
alert (a);//Will error, A is not defined

We found that after the function was externally used, the variables in the function could not be taken out of the function.

Summary: Through (1), (2), we deepened the understanding of JS, no block-level scope only function scope!

Example: If now example 1:

var a=1
function abc () {
 var a=2;
}
ABC ();
Alert (a)//a=1

Special Note If Example 2:

var a=1
function abc () {
a=2;
alert (a);
}
ABC ();//a=2

For the ratio 1, the difference is in Example 2, "a=2" instead of "var a=2"

The difference is that if Var A is, it means that the variable A is defined in the function, if there is no variable declaration, and if direct a, the variable A is defined in the global variable.

2. What if you refer to a variable inside a function?

From 1, JS only exists function scope, then how can we get the variables defined in the function?

According to the syntax rules of JS: internal functions (or internal objects), you can access variables in external functions.

What does that mean? Example Illustration 1:

Function abc () {
 var a=1;
 ! function () {
 alert (a)}
()
}//No error at this point, a=1

One more example (example of an internal object) Example 2:

var o={
 a=1,
 myfun:function () {return
 THIS.A
}
}

Then alert (O.myfun ()) Gets a value of 1, and now we have a general idea of how to access the variables in the function (or object, in fact the function itself is also an object)!

3. What is closure?

My understanding defines a function within a function!

A closure is a bridge between the inside and outside of a function!

That is, the internal function creates a closure when it is used outside of its definition!

We know that in general, when a function is called, the memory is freed, but it is applied to a function closure such as

function ABC1 () {
 var a=1;
function ABC2 () {
 a++;
} return
ABC2 ()
}

When we call the ABC1 () function, because the ABC2 () function is called in the ABC1 function, the variable in the function ABC1 () is called in the child function, so after the parent function ABC1 () call ends

The memory space for variable A is not released!

Why the GC mechanism cannot recycle variable A in the ABC1 () function because first we call the function ABC1 () in the global, we set the global object to C,ABC1 () object B, and we

The function ABC2 () is called in the function ABC1 (), and ABC2 (0 is a).

Again understand this relationship C called in B,b and called in the A,js when A,b object 22 is referenced to each other, and A,b has another object C referenced outside of the A,B function, the GC mechanism does not perform garbage collection (variable emptying)!

This leads us to the important role of closures:

If the internal function is invoked outside of it, a closure is generated, and the closure is used to hold the values of certain variables and will not be reclaimed by the garbage collection mechanism!

4. Disadvantages of closures

Because a closure is used, some variables persist in memory after the function call, so misuse of the closure can lead to a memory leak!

5. Extend the application, deepen the understanding of the closure!

var o={
 a:1;
Myfunc:function () {return
function () {return
 THIS.A}
}
}
Alert (O.myfunc () ()); A is not defined
}

More readers interested in JavaScript-related content can view this site: "JavaScript data structure and algorithm skills summary", "JavaScript Mathematical operational Usage Summary", "JavaScript switching effects and techniques summary", " JavaScript Search Algorithm Tips Summary, "JavaScript Error and debugging skills summary" and "JavaScript traversal algorithm and Skills summary"

I hope this article will help you with JavaScript programming.