Learn JS Closures

What is a closure?

• MDN: Closures are variables that have free and independent functions. In other words, a function defined in a closure can "remember" the environment it was created in.
• JS Advanced Programming: Closures refer to functions that have access to variables in another function scope.

After synthesizing the various materials, my understanding of closures is:

• Closures are composed of functions and their associated reference environments;
• A closure allows a function to access variables in its reference environment (also known as free variables);

Here is an example of closures:

In general, local variables in a function are only available during the execution of a function. Once foo() executed, it is reasonable to assume that the name variable will no longer be available.

But that's not true. In the example above, the MyName function becomes a closed packet.

Closures are a special kind of object. It consists of two parts: a function, and the environment in which the function is created. An environment consists of any local variables that are in scope when the closure is created. Therefore, myname consists of the variable name that exists in the scope when the ShowName function and the closure are created.

Here is an excerpt from the previous example of an mdn about closures.

What should be noted here is that the add5 and add10 are all closures. They share the same function definitions, but save different environments. In add5 the environment, it x is 5. While in add10 , x it is 10.

That is, each call to Makeadder () creates a new environment, so add5 and add10 do not share the same environment, so they are independent and separate from each other.

What's the use of closures?

• Packaging
  • Closures can be implemented in packages
  • • In this example, observer is a closure and an object. The property in this object is the interface that accesses the private variable of observerlist. External cannot directly access or manipulate observerlist, only through the provided interface to achieve access and operation of Observerlist.
      

Creating closures in loops

Take a look at the following example:

This function returns an array of functions. On the surface, it seems that each function will print its own index value. But actually each function prints 10. Because each function refers to the same variable i. When the Foo () function returns, the value of I becomes 10, so each function executes with a result of 10.

By creating another anonymous function, you can make the behavior of the closure conform to expectations.

Performance issues

After the function executes, if the variable in the function is referenced by an external function (that is, it generates a closure), the variable is not recycled by the JS garbage collection mechanism, but is stored in memory.

Referencing data from the MDN:

If closures are not required for some special tasks, it is unwise to create functions in other functions without the need, because closures have a negative impact on script performance, including processing speed and memory consumption.

For example, when you create a new object or class, the method should usually be associated with the object's prototype, rather than being defined in the object's constructor. The reason is that this will cause each constructor to be called, and the method will be re-assigned once (that is, for each object creation).

Learn JS Closures