Note the following before getting started with javaScript: Closure

For those who want to improve javascript technology, closures are often mysterious. Some people said earlier that closures in javaScript may cause javaScript Memory Management complexity and may cause memory leakage. Therefore, we do not recommend using closures. However, jQuery proves that the closure is very useful, and C #'s Linq also proves the importance of the closure technology. It is worthwhile to take a little time to understand the closure, the following content is just a cup of tea time.

First, let's define a Closure: in computer science, Closure is short for Lexical Closure, a function that references free variables. This referenced free variable will exist with this function, even if it has left the environment where it was created. Therefore, there is another saying that a closure is an entity composed of a function and its reference environment.

What is important in the above definition is

Closures are associated with: Functions and variables

Closure locked: Environment Relationship between functions and variables

 

It is often said that the closure will give a similar case, that is, the special nature of javaScript, the function to access global variables, this I have never understood, is it special and strange for a function to access the global variables in its environment?

[Javascript]
Var a = 10;
Function fun1 (){
Alert ();
}
 
 
Fun1 ();

Even with the following code, I don't feel any problems.
[Javascript]
Var a = 10;
 
Function fun2 (){
B = 100; // global variable
}
 
Function fun1 (){
Alert ();
Alert (B );
}
 
Fun2 ();
Fun1 ();

The following code is worth your consideration:
[Javascript]
Function fun1 (x ){
Var a = x;
Function fun2 (){
Return;
}
Return fun2;
}
 
 
Alert (fun1 (100) (); // 100
Alert (fun1 (9) (); // 9

If you look at the results, you may also be dismissive. The returned value is very clear. But if you think about it, it's not easy.
The result of the function fun1 is a function of fun2. In the code, fun1 () calls the execution of fun1 and obtains the function of fun2. fun1 () means that fun2 () is executed! If you still feel normal, either you have understood the closure, or you have ignored an important fact!

After fun1 () is called, the memory occupied by fun1 should have been released, and all variables in fun1 function will be released !!! Right?

[Javascript]
Function sum (x, y ){
Var a = x, B = y;
Return a + B;
}
 
 
Alert (sum (9, 5); // 14

In the above Code, when sum (9, 5) is completed, the sum function will be released, and a and B will not exist, right? If you still don't feel very clear, let's take a look at the following decomposition actions.
[Javascript]
Function fun1 (x ){
Var a = x;
Function fun2 (){
Return;
}
Return fun2;
}
 
 
Var fun3 = fun1 (10 );
Var fun4 = fun1 (9 );
Alert (fun4 (); // 9
Alert (fun3 (); // 10

Let's see if fun1 assigned 10 values to x, fun1 assigned 9 values to x, and fun4 is executed first, and the returned value is 9, if you execute fun3 again, you will get 10 !!! What is it about? It means that when fun2 is created, it locks the variables it needs, or it is not so exaggerated that it is remembered.
A closure is a function that locks or remembers the variables that need to be used when creating itself.

The function creation here does not refer to the function declaration, but also refers to the activation of the anonymous function expression when the function expression is activated: call is a call, () group, and return.

Take a look at the following cases

[Javascript]
Var dofun = [];
 
For (var I = 0; I <10; I ++ ){
Dofun [I] = function (){
Return I;
}
 
}
 
For (var j = 0; j <10; j ++ ){
Alert (dofun [j] (); // return all 10
}

Many people have used this case on the Internet to illustrate the characteristics of closures. I need to seriously declare two problems.
1. Closure

2. More amazing features in this case

Let's talk about the closure first, because when the returned anonymous function is only in www.2cto.com

[Javascript]
Dofun [j] ()
This function is activated only when I is set to 10. To solve this problem, the function can be activated when I is set to a variety of values, how to activate it? Return
[Javascript]
Var dofun = [];
 
For (var I = 0; I <10; I ++ ){
Dofun [I] = (function (k ){
Return function (){
Return k;
}
} (I ));
 
}
 
For (var j = 0; j <10; j ++ ){
Alert (dofun [j] (); // return all 10
}

What is interesting in this process is that I need a k to help. Why?

That's the 2nd point I just mentioned. Let's take a look at the following very speechless code.

[Javascript]
Var dofun = [];
 
For (var I = 0; I <10; I ++ ){
Dofun [I] = function (){
Return I;
}
 
}
 
For (var I = 0; I <10; I ++ ){
Alert (dofun [I] ();
}

At first glance, you may jump up. This is not a joke. As a result, we already know. It's all 10 !!!! Error !!!!!! The pop-up is 0 1 2 3 4 5 6 7 8 9 !!!
Test it if you don't believe it. Let's take a closer look at the differences in the code? The for variable below is I, which is different and the key to closure!

Whether the function is worth locking a variable depends on whether the variable can be found in the context scope when the function is called. If the variable cannot be found during the call, the internal function will lock it, otherwise it will not lock, at least on the surface.

Now let's look at the first case.

[Javascript]
Function fun1 (x ){
A = x;
Function fun2 (){
Return;
}
Return fun2;
}
 
 
Var fun3 = fun1 (10 );
Var fun4 = fun1 (9 );
Alert (fun4 (); // 9
A = 999;
Alert (fun3 (); // 999

The result of fun3 () is 999. It doesn't mean that a is a global variable, but that fun3 can find a in the context scope during execution, the global variables are just a collection.

From the column of shyleoking