Of Stack

Detail the js closure

  • 2020-03-30 03:50:34
  • OfStack

Closures are a difficult feature of the Javascript language, and many advanced applications rely on closures.

Closures have three characteristics:

1. Function nesting
2. Function can refer to external parameters and variables
3. Parameters and variables are not collected by the garbage collection mechanism
A closure is a function that has access to a variable in another function's scope

One of the advantages and disadvantages of using closures is that you can keep local variables in memory and avoid using global variables. Global variables can be invoked in every module, which can be disastrous.

So it is recommended to use private, encapsulated local variables.

After the execution of the general function, the local active object is destroyed, and only the global scope is stored in memory. But closures are different!

Closure of nested functions: 


  function aaa() { 
     var a = 1; 
     return function(){
      alert(a++)
     }; 
    }     
    var fun = aaa(); 
    fun();//A ++, and then a is still ~
    fun();// 2  
    fun = null;//a Recycled!!

 
The output above is 5;
Closures keep variables in memory and can increase memory consumption if not used properly.

Javascript garbage collection principle

(1) in javascript, if an object is no longer referenced, it will be collected by GC;
(2) if two objects refer to each other and are no longer referred to by the third, the two objects referred to by each other will be recycled.

So what are the benefits of using closures? The benefits of using closures are:


So how do we get to the point where a is both a local variable and an additive variable?

3. Accumulation of local variables (what closures can do) 


<script>
function outer(){
    var x=10;
    return function(){       //Functions are nested functions
        x++;
        alert(x);
    }
}
var y = outer();       //The external function is assigned to the variable y;
y();         //The y function is called once and the result is 11
y();        //The y function is called a second time, and the result is 12
</script>


Function declaration and function expression in js:
In js, we can declare a function by the keyword function: 


<script>
function abc(){
    alert(123);
}
abc();
</script>


We can also turn this declaration into an expression with a "()" : 


<script>
(function (){
    alert(123);
})();          //The previous expression is then called directly through (), so the function doesn't have to write its name;
</script>


Fourth, modular code, reduce global variable pollution 


<script>
var abc = (function(){   //ABC is the return value of an external anonymous function
    var a = 1;
    return function(){
        a++;
        alert(a);
    }
})();
abc();  //2; Calling the ABC function once is actually calling the return value of the inner function inside
abc();  //3
</script>


The existence of private members 


<script>
var aaa = (function(){
    var a = 1;
    function bbb(){
        a++;
        alert(a);
    }
    function ccc(){
        a++;
        alert(a);
    }
    return {
        b:bbb,       //Json structure
        c:ccc
    }
})();
aaa.b();   //2
aaa.c()   //3
</script>


Find the index of the corresponding element directly in the loop 


  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <title></title>
  <script>
  window.onload = function(){
      var aLi = document.getElementsByTagName('li');
      for (var i=0;i<aLi.length;i++){
          aLi[i].onclick = function(){    //The for loop has ended when clicked
          alert(i);
          };
      }
  }
  </script>

  </head>
  <body>
      <ul>
          <li>123</li>
          <li>456</li>
          <li>789</li>
          <li>010</li>
      </ul>
  </body>
  </html>

7. Rewrite the above code with closures: 


  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <title></title>
  <script>
  window.onload = function(){
      var aLi = document.getElementsByTagName('li');
      for (var i=0;i<aLi.length;i++){
          (function(i){
              aLi[i].onclick = function(){
                  alert(i);
              };
          })(i);
      }
      };
  </script>

  </head>
  <body>
      <ul>
          <li>123</li>
          <li>456</li>
          <li>789</li>
      </ul>
  </body>
  </html>
Related articles: