The concept of closures

A function is bound with a reference to its surrounding state (lexical environment), or the function is surrounded by references. Such a combination is called a closure. That is, closures allow you to access the scope of an inner function from within its outer function. In JavaScript, whenever a function is created, the closure is created at the same time as the function is created. — From the explanation of closures on MDN, go to MDN-closures.

In common parlance, any time a function accesses a variable that is not in the scope of the current function, it is called a closure.

Let’s look at a simple MDN example:

function init() {
    var name = "Mozilla"; // Name is a local variable created by init
    function displayName() { // displayName() is an internal function, a closure
        alert(name); // Use a variable declared in the parent function
    }
    displayName();
}
init();
Copy the code

Init () creates a local variable name and a function called displayName(). DisplayName () is an internal function defined in init() and is only available within the init() function body. Note that displayName() does not have its own local variable. However, because it has access to variables of external functions, displayName() can use the variable name declared in the parent function init().

As you can see from the example, it’s a kind of scope chain, in the displayName internal function, you access the name property, but you don’t find the name property in its internal scope, so you go up the scope chain, and you find the name property in the init function.

Meaningful closures

According to the example above:

function init() {
  var name = "Mozilla"
  return function displayName() {
    console.log(name)
  }
}
let fn = init()
fn()
Copy the code

In this case, the init function returns the displayName function, and within the displayName function there is a reference to the name variable in the external function init, forming a closure.

Usage scenarios

Corylized function

The goal of currying is to avoid frequent calls to functions with the same arguments and to easily reuse them.

// Suppose we have a function that finds the area of a rectangle
function getArea(width, height) {
    return width * height
}
// Before currying
// If we touch the width of the rectangle is always 10
const area1 = getArea(10.20)
const area2 = getArea(10.30)
const area3 = getArea(10.40)

// We can use closures to critise the function that calculates the area
function getArea(width) {
    return height= > {
        return width * height
    }
}

const getTenWidthArea = getArea(10)
// If you hit a rectangle with width 10, you can calculate the area like this
const area1 = getTenWidthArea(20)

// And can be easily reused if you encounter occasional width changes
const getTwentyWidthArea = getArea(20)
Copy the code

Closure summary

  • Form: a nested function within a function where the inner function refers to the variables of the outer function
  • Function: Prolong the life cycle of variables
  • Advantages: you want a variable to stay in memory for a long time, modularized code to avoid fouling global variables, private properties
  • Disadvantages: Cannot reclaim referenced variables in closures, causing memory leaks