1. Closure meaning
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>A closure is an object that contains a function and a variable that is captured by it</p>
<script>
function f1(){
var a=1 ;
var b=2 ;
function f2(){ // The closure has been generated at this point. [scope] of f2 --> lexical environment of f1 (Lx)
console.log(a);
}
f2();
}
f1 ();
</script>
</body>
</html>
2. Reduce global variables for closure applications
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>Benefit 1 of closure: reduce global variables</p>
<script>
// 1. Sometimes when we need to implement the effect that a function will increment itself every time it is called, but according to the garbage collection mechanism of local variables, this example obviously cannot be implemented
// function f(){
// var a=1;
// a++;
// alert(a);
// }
// f();
// f();
// f();
// 2. So we set a as a global variable, although the effect is achieved, it will cause There are too many global variables, which will cause a series of problems such as naming conflicts in large projects
// var a=1;
// function f(){
// a++;
// alert(a);
// }
// f() ;
// f();
// f();
// 3. Closures can solve this problem,
function f(){
var a=1 ;
return function (){
a++;
alert(a);
}
}
var g= f();
g();
g();
g();
// At this point, we have solved this problem by using closures. Since local variables are referenced in sub-functions, they cannot be reclaimed by the garbage collection mechanism, and because sub-functions can reference the variables, return sub-functions can be used in The variable is referenced outside the function. As long as the browser is not closed and the page is not closed, it can be referenced outside the function, so that a will not be recycled, the value can be saved, and it can be incremented
// but there is a problem that needs to be paid attention to, the existence of the closure will make it It will not be reclaimed by the garbage collection mechanism, it will occupy more memory than other functions, and if the closure is used excessively, it may cause too much memory. An issue that may cause the browser to crash. Then the solution is that when the effect we need to achieve has been achieved, the reference to the anonymous function should be released. Without the reference, it becomes an ordinary function and will be recycled by the garbage collection mechanism.
</script>
</body>
</html>
3. The reduction of closure application reduces the number of parameters passed to the function
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>Benefit 2: Reduce the number of parameters passed to the function</p>
<script>
// To implement the following example requires two parameters, a is the base, b is the sum after i is incremented
// function f(a,b){
// var c;
// var d=0;
// for ( var i=1;i<=b;i++){
// d+=i;
// }
// c=a+d;
// alert(c);
// }
// f(3,4);/ /The popup result is 3+(1+2+3+4)=13
// The following example uses a closure to achieve the same effect with one parameter
function f(a){ // Create a basic value function with a parameter of a. (The f function is actually equivalent to a factory that creates a function, it returns another, that is, its internal function)
return function (b){ // Create a self-increasing function and return (this function, as its internal function, will refer to its parameters to form a closed function) Bag)
var c=0;
for(var i=0;i<=b;i++){
c +=i; // The for loop implements auto-increment to the parameter b and assigns it to c
}
return c+a; // returns the sum of c and the base value
}
}
var g=f(2); // Assign the f() function to g, and pass in the parameter 2 to the f function, which is the base value 2. (In fact, assign the return value of the f function, the self-increment function, to g, to put it bluntly Now, when looking at the f() function alone, it is the f() function. When the f() function is assigned as a value, the value of the f() function is actually its internal return function)
alert(g(3 ));
alert(g( 4)); // At this time, the g function pops up, and parameter 3 is passed to the g function, that is, the return value of the f function is the self-increasing function, and the parameter 3 is passed in.
// The final pop-up result is 2+ ( 1+2+3)=8. 2+(1+2+3+4)=12.
var g1=f(3); // Of course, the f() function is also called multiple times for assignment, and each time it is called, it changes once The parameter value of the base value function, resulting in a new closure
alert(g1(4 ));
alert(g1( 5)); // The result is 3+(1+2+3+4)=13. 3+(1+2+3+4+5)=18.
</script>
</body>
</html>
4. Encapsulation of Closure Application
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>Benefit 3: Encapsulation</p>
<script>
( function (){
var m=0 ;
function getM(){ // get m value
return m;
}
function setM(val){ // Set m value
m= val;
}
window.g =getM; // In order to access it externally, publish it outside the function.
window.s= setM;
})(); // Self-calling function, encapsulate it
s(10); // Set the value to 10
alert(g()); // Get the popup value to 10
</script>
</body>
</html>