preface

Closures are something that really makes my head spin. They have always been a concept and rarely used, so I never really understood them. Recently, I have been reading the method of anti-shake and throttling function. It is recommended to use closure to write it, so I have to understand closure again. After anti-shake and throttling, I will write a separate article to explain it.

What is a closure

Closures are defined in MDN as follows:

Function and references to its surrounding state (lexical environment) are bundled together to form a closure.

In other words, closures are made up of functions and the variables they reference. Then there is the question of whether any function that internally refers to an external variable can form a closure, for example:

	let a = 1;
    function printA(){
      console.log(a);
    }
Copy the code

By definition, the above example also constitutes a closure, but why is it different from the usual closures?

The Definitive JavaScript Guide does say:

Technically speaking, all JavaScript is a closure.

But for practical purposes, such closures make no sense, so MDN adds:

That is, closures allow you to access outer function scopes from inner functions.

So the referenced variable should be a variable within the function scope. In other words, the closure should exist inside the function scope. For example:

    //a and printA form a closure
	function func(){
      let a = 1;
      function printA(){
        console.log(a);
      }
      printA();
    }
    func();
Copy the code

One might look at this example and think, why do all closures I see return a function? It’s actually the same thing, return is just for external calls, essentially the same thing.

Those who know a little about scope will know why it is possible to refer to variables of an external function in an inner function: when a variable is referred to in a function, it is read from its own function first, and if it is not, it is read layer by layer until it is read. In particular, functions depend on variable scope, which is determined when the function is defined, not when the function is called. So when looking for a variable, you should look up from the function at the time of the definition, not the time of the call. Here’s an example:

	function func(){
      let a = 1;
      console.log(a);
    }
    let a = 2;
    func();  / / 1
Copy the code

A simple application of closures

With all that said, what are closures really for? Closure of the common use is to provide indirect access to a variable method, sometimes we need to use a variable in some places, but cannot be defined as a global variable, there is a risk of tampering, then we can use to define a private variable, and then through the closure exposed out, for example through closure to write a counter, the code is as follows:

    function count(){
    	let num = 0;
            return {
                add: function () {
                    num++;
                    return num;
                },
                sub: function () {
                    num--;
                    return num;
                },
                reset: function () {
                    num = 0;
                    returnnum; }}}let counter = count();
        counter.add();  / / 1
        counter.add();  / / 2
        counter.sub();  / / 1
        counter.reset(); / / 0
        counter.add();  / / 1
Copy the code