I am not a software course, the expression will be not rigorous place, I hope you can help correct.

Before we talk about closures, there are a few concepts to understand: public variables, private variables, and scope

Public variables: Variables that everyone can use. The classic example is the global object window in the browser

Private variables: Variables that can only be used by a program, in the following scenarios

function fn() {
  var word = 'hello'
  console.log(word)
}
Copy the code

The Word variable in the preceding scenario can only be used in the FN function and cannot be accessed outside the FN function. Therefore, it is considered as a private variable of the FN function

Scope: the valid region (space) of a variable.

The window global variable, for example, can be used anywhere, and its scope is “global scope”;

Word variable in fn, the effective area is only in fn function, its scope is “function scope”.

There are only two types of scope that are most commonly used in Javascript below es5: global scope and function scope

(Unrecommended uses such as the eval scope are not discussed.)

A quick personal explanation: closure is the action of using a function scope to protect a private variable and returning a reference to the protected variable.

A typical example of a closure is as follows

var greet = (function() {
   var word = 'hello'// Word variables are protected inside the execute now function (IIFE)return function greet() {/ / return a function to the console. The log (word) / / keep the word reference}}) () the () / / greet'hello'
Copy the code

Why do we have closures?

Suppose you have a scenario where you write a program that does something, and it has a lot of code, and you write a lot of utility functions and references a lot of variables in order to do that.

These functions and variables are used in combination with each other, they are a function block, that is, a “module”, this function module, can not be written in the global environment, right?

No, you can still write it in a global environment, and it will run fine anyway.

Suppose you define a variable A, a function B, written directly in the global context, and suppose this module implements function A

So, future programmers, including you, want to write another feature, B

In order to implement this function B, you also want to write a variable A, function B, when you are embarrassed, you remember that the implementation of function A has used these names, can not use a, B

You come up with the names C and D, you use the names C and D, you start debugging, and function A stops working!

After checking, you find that function A was written with two names C and D, and the naming in function B interferes with function A.

The reason for the naming conflict hardly needs to be explained, but it can be described as “a variable with the same name already exists in the current scope”, and the reason for the conflict of functions is also because the two functions are written in the same scope. To solve the above problems, we need to start from the scope.

At this point, we should realize that a module should have its own scope to ensure that the module works properly.

In addition to the global scope, JS can only use function scope, so we can use function scope to protect the module, so the next step is to use closure, because closure is essentially a function scope

Application of closures

In addition to the global scope, JS can only use function scope, so you want to use function scope to protect the module,

Suppose that when you use function A, you actually use A function fnA,

Then you can write all the flow in the function scope and expose the fnA via a return statement

There is the following code

function getA() {
   var a = 'xxx'
   var c, d

   function b() {// did something unknown} //...function fnA() {b() console.log(a) // The rest of the program... }return fnA
}

var fnA = getA()
Copy the code

So, your function A has its own scope, and A, B, C, D, whatever it is, is protected under the scope of the getA function, okay

There is no need to worry that the scope will be destroyed after the getA function is executed. The JS engine will automatically preserve the scope when it detects that a private variable is being referenced, and will add a special name, Closure

conclusion

This is the use of closures, my own view of closures: using a function scope to protect a private variable and returning a reference to the protected variable is a closure

When developers want to write a new feature, they no longer need to worry about naming conflicts with old features, or whether the new feature will affect the old feature.

For more information on the causes of closures, it is recommended to search for JS garbage collection mechanisms and JS scope chains