Js closure
What to know before closure
1. Function scope
(1). The special feature of Js language is that global variables can be read directly inside functions
The code copy is as follows:
<script type="text/javascript">
var n=100;
function parent(){
alert(n);
}
parent();//100
</script>
If in php
The code copy is as follows:
<?php
$n=100;
function parent(){
echo $n;
}
parent();//The error will be reported n is not defined
?>
(2). Local variables inside the function cannot be read outside the function
The code copy is as follows:
<script type="text/javascript">
function parent(){
var m=50;
}
parent();
alert(m);//The error m is not defined
</script>
Note that when declaring variables internally, you must add var, otherwise a global variable will be declared.
The code copy is as follows:
function parent(){
m=50;
}
parent();
alert(m);//50
//Of course this is even more so in php.
The code copy is as follows:
<?php
function parent(){
global $m;//Global, definition and assignment should be separated
$m=50;
}
parent();
echo $m;//50
?>
//If there is no global, there will be no definition errors
Sometimes, if you need to obtain local variables inside the function, you need to use the characteristics of the scope of js variables. For example, defining child functions inside the function, for child functions, the parent function is its global, and the child function can access the variables in the parent function (for the entire js code, it is a local variable)
The code copy is as follows:
<script type="text/javascript">
function parent(){
var m=50;
function son(){
alert(m);
}
return son;
}
var s=parent();//Save the result globally
s();//50
</script>
All local variables within Parent are visible to their child functions, but local variables within their child functions are invisible to their parent functions. This is the chain scope structure unique to JS. The child object will look up all parent objects' variables level by level. All variables of the parent object are visible to the child objects, otherwise it does not hold true! The above son function is a closure
Some students may do this
The code copy is as follows:
function parent(){
var m=50;
function son(){
alert(m);
}
}
parent();
son()//The function son is not defined
Note that in javascript, the functions declared in the function are local, and they are released after the function is run.
Pay attention to the difference between this and php
The code copy is as follows:
<?php
function parent(){
function son(){
$m=50;
echo $m;
}
}
parent();
son();//Output 50 will not report an error
?>
Closure
Functions internally define functions, bridges connecting internal and external functions
There are 2 functions of closures:
First, the read function inside the aforementioned variables,
The second is to save the values of these variables in memory to realize data sharing
Here are a few examples of closures
The code copy is as follows:
<script type="text/javascript">
var cnt=(function(){
var i=0;
return function(){
alert(i);
i++;
}
})();
cnt();//0
cnt();//1
cnt();//2
cnt();//3
</script>
I save the execution result of anonymous function (that is, assigning the declaration of the subfunction to the global variable cut) in memory
When executing cut(), the value is directly retrieved from memory. Only the cnt() function can be called, and it is not possible to directly alert(i)
You can also transfer parameters to the closure
The code copy 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, we look at the following code
For example, I want to return an array with 5 functions in the array, the first function pops up 0, and the second one pops up 1...
If the code is written like this
The code copy 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]());
The pop-up function body
function(){return i;} }
Finally, this i is 4, and then ++ becomes 5
For loop stops
It was found that all popped up 5, which obviously did not meet our requirements
Solution 1
Self-execution of functions inside
The code copy 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<a.length;i++){
alert(a);
}
But we found that the elements in the returned array are the result of the function execution, but what we want is that the function needs to be upgraded.
Solution 2
Closure implementation
The code copy 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
The code copy 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 closures! Very simple and practical.