Closure of js (common and easy to understand)

1. Definition of closure

What is a closure is to define a function inside a function (this is also the most common form). This inner function always maintains access to the scope in the outer function (the small box can always access the big box but the big box cannot access the small box).

Second, the generation of closure

A closure occurs when a nested inner (child) function refers to a variable of a nested outer (parent) function. The closure is generated when the function definition is executed, and there is no need to wait for the execution to be generated.
insert image description here

3. The role of closure

There are two common effects:

  • 1. Use the variables inside the function to still survive in memory after the function is executed (extending the life cycle of local variables)
  • 2. Allow the outside of the function to operate (read and write) the data (variable/function) inside the function
function f1() {
    
    
  var n = 999;
  nAdd = function () {
    
    
    alert(n += 1);
  }
  function f2() {
    
    
    alert(n);
  }
  return f2;
}

var result = f1();
result(); //999
nAdd();//1000
result(); //1001

In this code, result is actually the closure f2 function. It runs twice, the first time the value is 999, the second time the value is 1000. This proves that the local variable n in the function f1 has been kept in memory, and has not been automatically cleared after f1 is called.

Why is this so? The reason is that f1 is the parent function of f2, and f2 is assigned to a global variable, which causes f2 to always be in memory, and the existence of f2 depends on f1, so f1 is always in memory, not after the call , to be recycled by the garbage collection mechanism (garbage collection).

Another noteworthy place in this code is the line "nAdd=function(){n+=1}". First of all, the var keyword is not used in front of nAdd, so nAdd is a global variable, not a local variable. Secondly, the value of nAdd is an anonymous function (anonymous function), and this anonymous function itself is also a closure, so nAdd is equivalent to a manipulator, who can operate on local variables inside the function outside the function.

4. Notes on using closures

1. Because the closure will make the variables in the function be stored in the memory, the memory consumption is very large, so the closure cannot be abused, otherwise it will cause performance problems of the web page, and may cause memory leaks in IE. The solution is to delete all unused local variables before exiting the function.

2. The closure will change the value of the variable inside the parent function outside the parent function. So, if you use the parent function as an object (object), the closure as its public method (Public Method), and the internal variable as its private property (private value), then you must be careful not to Feel free to change the value of the variable inside the parent function.

Guess you like

Origin blog.csdn.net/m0_59722204/article/details/128909333