What is the use of js closure? Usage examples of js closure (with code)

This article brings you what is the use of js closure? The usage examples of js closure (with code) have certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Js language can directly read global variables inside the function, but local variables within the function cannot be read outside the function

<script type="text/javascript">
var n=100;
function parent(){
  alert(n);
}
parent();//100
</script>

<script type="text/javascript">
function parent(){
  var m=50;
}
parent();
alert(m);//报错 m未定义
</script>

Note: Be sure to add var when declaring variables inside the function , otherwise a global variable is declared.

function parent(){

m=50;

}

parent();

alert(m);//50

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 it Globally, child functions can access variables in the parent function (which are local variables for the entire js code)

<script type="text/javascript">
function parent(){
   var m=50;
   function son(){
        alert(m);
   }
   return son;
}
var s=parent();//将结果保存在全局里
s();//50
</script>

All local variables inside Parent are visible to its child functions, but its children Local variables within a function are invisible to its parent function. This is the unique chain scope structure of js. The child object will search for all the variables of the parent object level by level. All the variables of the parent object are All sub-objects are visible, but the reverse is not true! The son function above is a closure.

Closure: Define the function inside the function, the bridge connecting the inside and outside of the function. The closure has two functions:

• One is The variables inside the reading function mentioned earlier,

• The second is to save the values ​​​​of these variables in memory to achieve data sharing

The following are several examples of closures

1. Anonymous functions implement closures:

<script type="text/javascript">
var cnt=(function(){
    var i=0;
    return function(){
        alert(i);
        i++;
    }
})();
cnt();//0
cnt();//1
cnt();//2
cnt();//3

Assign the execution result of the anonymous function (that is, the declaration of the inner sub-function to the global variable cut), i is saved in the memory and the value is obtained directly from the memory when executing cut(). i can only be called by the cnt() function, and direct alert(i) will not work.

2. Pass parameters into the closure:

var cnt=(function(num){
return function(){
    alert(num);
    num++;
  }
})(5);
cnt();//5
cnt();//6
cnt();//7
//当然还可以调用时传参
var cnt=(function(){
    var i=0;
return function(num){
    num+=i;
    alert(num);
    i++;
  }
})();
cnt(1);//1
cnt(2);//3
cnt(3);//5

Related recommendations:

js closure and prototype

Understand js closure in one minute_javascript skills

The above is the detailed content of What is the use of js closure? Usage examples of js closure (with code). For more information, please follow other related articles on the PHP Chinese website!