Summary of js closure examples_basic knowledge

Js closure
Things to know before closure
1. Function scope
(1) The special thing about Js language is that global variables can be read directly inside the function

Copy code The code is as follows:

If in php

Copy code The code is as follows:

$n=100;
function parent(){
echo $n;
}
parent();//will report an error n is undefined
?>

(2). Local variables within the function cannot be read outside the function

Copy code The code is as follows:

Note that var must be added when declaring variables inside a function, otherwise a global variable will be declared

Copy code The code is as follows:

function parent(){
m=50;
}
parent();
alert(m);//50

//Of course this is even more true in php,

Copy code The code is as follows:

function parent(){
global $m;//global, definition and assignment should be separated
$m=50;
}
parent();
echo $m;//50
?>
//If there is no global, an undefined error will still be reported

Sometimes, if you need to get the local variables inside the function, you need to use a flexible method to take advantage of the characteristics of js variable scope, such as defining a sub-function inside the function. For the sub-function, the parent function is its global, and the sub-function is Functions can access variables in the parent function (which are local variables for the entire js code)

Copy code The code is as follows:

All local variables inside Parent are visible to its child functions, but local variables within its child functions are not visible to its parent function. This is the unique chain scope structure of js. Child objects will Search all the variables of the parent object upwards one level at a time. All variables of the parent object are visible to the child objects, and the reverse is not true! The son function above is a closure
Some students may be like this

Copy code The code is as follows:

function parent(){
var m=50;
function son(){
alert(m);
}
}
parent();
son()//Report function son is undefined

Note that in JavaScript, functions declared in functions are local and are released after the function is finished running
Pay attention to the difference between this and php

Copy code The code is as follows:

function parent(){
function son(){
$m=50;
echo $m;
}
}
parent();
son();//Output 50 and no error will be reported
?>

Closure

Define the function inside the function, the bridge connecting the inside and outside of the function
Closure has two functions:
One is the previously mentioned reading of variables inside the function,
The second is to store the values ​​of these variables in memory to achieve data sharing
Here are a few examples of closures

Copy code The code is as follows:

The execution result of the anonymous function (that is, the declaration of the inner sub-function is assigned to the global variable cut), i is saved in the memory
When executing cut(), the value is obtained directly from the memory. i can only be called by the cnt() function, and direct alert(i) will not work
You can also pass parameters into the closure

Copy code The code is as follows:

var cnt=(function(num){
return function(){
alert(num);
num ;
}
})(5);
cnt();//5
cnt();//6
cnt();//7
//Of course, you can also pass parameters when calling
var cnt=(function(){
var i=0;
return function(num){
num =i;
alert(num);
i ;
}
})();
cnt(1);//1
cnt(2);//3
cnt(3);//5

In order to have a better understanding of closures, let’s look at the following code
For example, I want to return an array. There are 5 functions in the array. The first function pops up 0, the second pops up 1...
If the code is written like this

Copy code The code is as follows:

function box(){
var arr=[];
for(i=0;i<5;i ){
arr=function(){return i;}
}
return arr;
}
var a=box();
alert(a);//Array containing five function bodies
alert(a[0]());
alert(a[1]());

Pop-up function body
function(){return i;} }
The last i is 4, and then it becomes 5
For loop stops
I found that 5 pops up in all cases, which obviously does not meet our requirements

Solution 1
Self-immediate execution of functions inside

Copy code The code is as follows:

function box(){
var arr=[];
for(i=0;i<5;i ){
arr=(function(num){return i;})(i);
}
return arr;
}
var a=box();
for(var i=0;i alert(a);
}

But we found that the elements in the returned array are the results of function execution, but what we want is that the function has to upgrade our code

Solution 2
Closure implementation

Copy code The code is as follows:

function box(){
var arr=[];
          for(var i=0;i<5;i){

arr=(function(num){
Return function(){return num;}
                  })(i);

}
return arr; 
}

var arr=box();

for(var i=0;i<5;i ){

alert(arr());//0,1,2,3,4
}

Key code

Copy code The code is as follows:

arr=(function(num){
           return function(){return num;}
})(i);

When i=0
arr[0]=(function(num){return function(){return num;}})(0);

1 o’clock

arr[1]=(function(num){return function(){return num;}})(1);

The above are the benefits of closure! It's very simple and practical.