This is the eighth day of my participation in the August Genwen Challenge.More challenges in August

Closure is a common test point in the front-end interview, but also we must master and reasonable use of the point, today to learn the closure.

What is a closure?

Let’s look at the definition of a closure. Closures are functions that refer to variables in the scope of another function.

Closures are hard to understand by definition. There are a few prerequisites to understanding closures. First, we need to know that JavaScript uses lexical scope, which means that functions are executed using defined functions in the valid variable scope, rather than calling functions in the valid variable scope. To achieve this lexical scope, the internal state of a JavaScript function object must include not only the code of the function itself, but also a reference to the scope in which the function was defined. This mechanism by which function objects are combined with scopes (that is, a set of variable bindings) to resolve variables is known in the computer science literature as closures.

By this definition, all functions in JavaScript are closures. But since most function definitions and calls are in the same scope, the existence of closures doesn’t matter. When we talk about JavaScript closures in interviews and conversations, we specifically refer to when a function is defined in a different scope than when the function is called. The most common case is when a function returns a nested function defined inside it.

Understand the closure

To understand closures, you need to review the lexical scope rules for nested functions.

    let a = "global a";     // Declare global variable A
    function testa(){
        let a = "local a";  // Declare the local variable a
        function f(){
            return a;       // Returns the value of the current scope a
        }
        return f();
    }
    testa()                 // return "local a"
Copy the code

In the above code, testa() does three things

  1. A local variable a is declared
  2. Defines a function to return the value of the local variable A
  3. The function is called

That makes sense. The call to teata() should return “local a”. What if I changed it a little?

    let a = "global a";     // Declare global variable A
    function testa(){
        let a = "local a";  // Declare the local variable a
        function f(){
            return a;       // Returns the value of the current scope a
        }
        return f;
    }
    testa()();               
Copy the code

Now functions declared in testa() are not called directly from testa(), but are called in the global scope. Now, some of you might think that you’re going to return “Global A”. But actually in this case, it’s still going to return “local a”, which, alas, is the closure!

Let’s review the basic rule of lexical scope: JavaScript functions are executed using defined scopes. In the scope of the defined nested function f(), the value of the binding of variable A is “local A “. This binding is valid whenever the f() function executes, regardless of where the f() function executes. This is the essence of a closure: it captures the local variables (and parameter bindings) of the external function that it defines. So we often see articles that use a metaphor for closures: a function is understood as a person who, when born (when the function is created), is also given a backpack (closure) that includes the family environment (lexical scope). It’s more graphic.

Functions and disadvantages of closures

Role 1: Hide variables to avoid global contamination

Function 2: Reads variables inside a function

At the same time, when closures are not used properly, advantages become disadvantages:

Disadvantage 1: Variables cannot be collected by the garbage collection mechanism, resulting in memory consumption

Disadvantage 2: Improper use of closures can cause memory leaks

A brief explanation of why variables are not destroyed by the garbage collection mechanism when using closures is given here.

JS specifies that within the scope of a function, variables will be destroyed after the execution of the program, which can save memory;

When using a closure, by the nature of the scope chain, variables outside the closure (function) are not destroyed, because the function is always called, so there will always be, if the closure is used too much will cause memory destruction