An overview,

Closure, daily development seems to be rarely used, but in fact we often use in daily development invisible, and the interview is often mentioned, many students develop for several years may be the understanding of closure is only to say a general concept, today we will beat closure.

Second, the browser garbage collection mechanism

Before we talk about closures, let’s talk about closures to help us understand how they are generated. This is the browser’s garbage collection mechanism. Since we are focusing on closures, the browser garbage collection mechanism is a brief introduction to the concept.

Garbage collection concepts:

The browser has a garbage collector running periodically that tracks the use of variables and then destroys them when they are no longer in use, freeing up memory.

Third, the closure

First let’s look at the concept of closures:

A function that has access to the inner scope of another function.

A scope inside a function is a local scope that can only be accessed inside the function or by its children

function Fn1(){
  let a = Values of 'a';
  console.log('Fn1 internal output -->,a); //Fn1 internal output --> a
  function Fn2(){
    console.log('Fn2 internal output -->,a); //Fn2 internal output --> a
  };
  Fn2();
};
Fn1();
console.log(a); //Uncaught ReferenceError: a is not defined
Copy the code

Following the principle of scope-chain search, from top to bottom, the value of variable A can be read inside Fn1 and Fn2, while the value of variable A cannot be read outside Fn1. The concept of a closure is that you can access variable A in the function Fn1 in any scope. How do you make it generate a closure? For example: ↓↓↓

function Fn1(){
  let a = Values of 'a';
  function Fn2(){
    console.log(a)
  };
  return Fn2;
};
let Fn3 = Fn1();
Fn3(); / / a value
Copy the code

In the example above, we use the variable in Fn1 in Fn2, assign the Fn2 expression back to Fn3, and then execute Fn3, so that we access the variable in Fn1 outside the internal scope of Fn1. This is closure.

Why closures occur

It is well known that browsers run a garbage collection program that periodically collects memory from variables that are no longer being used. So normally, after the end of a function to perform and will no longer be used, the internal variables and itself will be destroyed by a recycling program, and release the memory here Fn1 after execution we expect as a result it this far, and should be destroyed, but this time its execution results were assigned to Fn3, has been linked with Fn3, Fn1 is no longer executed, but because of its internal connection to Fn3, Fn1 is not destroyed after execution, which is why closures occur. No picture, no truth, look at the following example ↓↓↓

Closures are generated as follows:

Not only does a closure have to be in the form shown above, it is possible to generate a closure whenever a value of the function type is passed inside a function. Let’s look at other closures:

function Fn3(fn){
  fn();
}
function Fn1(){
  let a = Values of 'a';
  function Fn2(){
    console.log(a)
  };
  Fn3(Fn2); // Function type value pass
}
Fn1();

let Fn3;
function Fn1(){
  let a = Values of 'a';
  function Fn2(){
    console.log(a)
  };
  Fn3 = Fn2; // Function type value pass
}
Fn1();
Fn3();
Copy the code
A real-world use scenario for closures

Closures are everywhere in our development, but we’re not aware of them. SetTimeout, setInterval, Ajax request callbacks, and so on.

conclusion

  1. The ability to access variables inside a function in any scope is called closure
  2. Closures occur because the function has internal references to other scopes, so memory cannot be freed, so variables in the function can still be accessed in other scopes.