Detailed explanation of closure in javascript_javascript skills

In JavaScript, a function can be regarded as a kind of data, which can be assigned to a variable and nested in another function.

var fun = function(){
  console.log("平底斜");
}

function fun(){
  var n=10;
  function son(){
    n++;
  }
  son();
  console.log(n);
}
fun(); //11
fun(); //11

Let’s slightly modify the second piece of code above:

var n=10;
function fun(){
  function son(){
    n++;
  }
  son();
  console.log(n);
}
fun(); //11
fun(); //12

Do you see the difference? If you can’t understand the code execution results, please read the previous blog post for an explanation of JavaScript scope and scope chain.

The variable n in the above code is a global variable and may be reassigned at any time without calling the fun function. In order to prevent variable n from being polluted, or to reduce the pollution of global variables, we need to put n in the function as a local variable.

function fun(){
  var n=10;
  function son(){
    n++;
    console.log(n);
  }
  son();
}
fun(); //11
fun(); //11

If we can directly call the son function globally, we can achieve the desired effect. The son function now exists as a local variable. If you want to access it globally, there are generally two methods:

One is to assign values ​​to global variables

var a;
function fun(){
  var n=10;
  a = function son(){
    n++;
    console.log(n);
  }
}
fun(); //son()
a(); //11
a(); //12

The other is to use return to return the value

function fun(){
  var n=10;
  return function son(){
    n++;
    console.log(n);
  }
}
var a=fun();
a(); //11
a(); //12

The son() function above is a closure. In a sense, all functions can be regarded as closures. A closure is a function that can access variables in the scope of the outer function.

var a;
function fun(){
  var n=10;
  a = function son(){
    n++;
    console.log(n);
  }
  return a();
}
fun(); //11
a(); //12
a(); //13
fun(); //11
a(); //12
a(); //13

It’s still the above code. Let’s modify it slightly and look at the execution results. This is because the variable n will be initialized every time the fun() function is executed.

The advantage of closure is to reduce global variables, avoid global pollution, and save local variables in memory. But this is both an advantage and a disadvantage. If there are too many closures in a piece of code, it may cause memory leaks. Since the local variables in the closure will not be recycled by the garbage collection mechanism, they need to be manually assigned to null (regarding memory leaks, a separate topic will be opened later)