One of the JavaScript classics closures

As a front-end developer, closures are obstacles that must be overcome. It is said that many interviewers hang on to the closure interview. Let me tell you a little bit about the closures in my understanding. Don't say too much nonsense, go straight to the subject.

Variable scope

Learning programming languages requires understanding the scope of variables. Variable scopes are global variables, local variables. Global variables are used sparingly because they are expensive to perform. Simple to understand, global variables: can be accessed anywhere. Local variables can only be accessed locally. Let me give you an example:

var data=100; function Domo () {    var data1=20;    Console.log (data);    Console.log (data1);} Domo ();

It can be seen that data can also be accessed in dome. All of it! Data is a global variable, and data1 is a local variable.

Closed Package

1. Common closures

 /*  * * simplest closure *   */ function   Bibao () { var  d=10;  return  function   () {console.log (d);    D  ++; }}  var  _bibao=bibao (); _bibao ();  //  output  _bibao (); //  output  

First we need to understand that the function has a return value and returns undefined if the return value is not changed manually. How do I manually change the return value? is to return using return in the function. You can return a Boolean value or an object or an empty string or a function. The simplest closure is to return an anonymous function. _bibao receives the return of the Bibao function. Equivalent to _bibao===function () {console.log (d); d++; }. However, this anonymous function uses the D. Now _bibao can access D; You can also change the D

2. No return closure

1. /* * * no return closures *   */ var _bibao1; function Bibao1 () {    var d=20;    _bibao1function() {        console.log (d);        d++;}    } Bibao1 (); _bibao1 (); // output 20
   

   _bibao1 ();//Output 21

The closure with no return is actually the same as the simplest closure above, and it simply assigns an anonymous function to the global variable. Global variables keep a reference to this anonymous function at the moment. When _bibao1 () is called, it is equal to calling this anonymous function.

3. Return the closure generated in the function

/** * Return the closure generated in the function * @callback {function} back-off functions **/functionBibao2 (callback) {vard=100; SetTimeout (function() {callback ()},2000)}function_bibao2 () {vard=120; Bibao2 (function() {console.log (d); D++;    }); SetTimeout (function() {console.log (d); },3000)}_bibao2 ();///two seconds after output 120. Output 121 after three seconds

This answer will be solved only if you remember that a variable or argument is a reference to a function. Executes _bibao2 (); it executes Bibao2 and then passes in an anonymous function, where the anonymous function remains accessible to D in _bibao2. The parameter callback in BIBAO2 maintains a reference to this anonymous function. So it accesses D in _BIBAO2 instead of D in Bibao2.

Summarize

Closures are useful and common, and we can control them only if we remember their principles. It is simply a reference to a function that can access variables in the parent function of the function.

One of the JavaScript classics closures