The principle and typical example of closures

Closures:

I. Principle

1. Concept: All objects are a closed package; The object is the maximum use of closures; Closures can only be generated by function calls. (not very well understood)
2. Function: Extend the scope of the variable so that the variable can be used in other scopes that are not within its own scope.
Example: The variable A in function A is referenced by function B, and when function A is called, it is common sense that the context of function A is destroyed by the stack, but
Since function b references the variable A in function A (that is, function B relies on the variable a in function a), and function B is not executed, the context of function A is not destroyed, and when function B is finished, the context of function A and B is freed (that is, the stack is destroyed).


3. Self-understanding: Closures are the combination of scope and context to analyze where a variable within a scope exists in exactly which scope.


Two. Typical examples of closures

1. function as return value
function fn1 () {
var max = 10;
return function (x) {
if (x > Max) {
Console.log (x);
}
}
}
var fn2 = fn1 ();
FN2 (20);

Description: 1.fn1 The return value of this function is an anonymous function;
2. When calling Fn1 (), a variable is used to receive the return value of the FN1;

1. Create the global context first:

FN1 is declared and assigned the entire function block (and the scope of the free variable that determines its internal anonymous function is the fn1 scope; This is self-understanding)
FN2 undefined

2. Execute the code and assign a value to the Fn2 (FN1 function block is assigned);

3. When you read the call to FN1 (), create a context environment for the FN1 scope:

Max undefined

4. Execute the code inside the FN1, assign Max a value of 10, and pay the return value to Fn2, at which point the fn1 has been called, and it is common sense that the stack is destroyed, but because Max in FN1 is referenced by fn2, the FN1 context has not been destroyed.

5. Fn2 after receiving the return value, call fn2, enter the FN2 function, before executing the FN2 function body, create the FN2 context;

X (parameter) 20
arguments [20]

6. After execution of the FN2, the context of the fn2 is destroyed and Fn1 is destroyed (when Max in FN1 is referenced by FN2 (other scopes), fn1 out of the stack is destroyed).



2. Function as parameter

var max = 10;
function fn (x) {
if (x > Max) {
Console.log (x);
}
}
The anonymous function, the last (FN), indicates that the anonymous function is called
(function (f) {
var max = 100;
f (15);
}) (FN);

Description: 1. (function (f) {var max = 100;f (15);}) (FN); This sentence indicates an anonymous function, (FN) that calls the anonymous function;
2. Create a global context first (note: This determines the scope of the free variable in the FN function is global), then assigns a value to the variable in the global, then executes the code, and when executed to (FN), represents the invocation of the corresponding anonymous function;
3. Enter the anonymous function, first create the context of the anonymous function, then assign the variables in the scope of the anonymous function, then execute the code inside;
4. When reading F (15), enter the FN function, first create the context of the FN function, then assign a value to the variable in the FN function, then execute the code inside;
5. When the FN function finishes executing, the context of the FN is destroyed; When the anonymous function finishes, the context of the anonymous function is destroyed and the last code is executed;

The principle and typical example of closures