First let's look at a piece of code
It can be seen from the above code that js has a characteristic feature, local methods can access the properties of external parent class methods, that is, subclasses or submethods can access the resources of the parent class.
Let's look at another piece of code
Why do we print undefined? Because the variable scope of the sub-method is only the scope of the sub-method, the outside cannot get it. So how does js get the value in the word method? Let's look at the code below
The local variables inside funOne cannot be obtained externally, but the local method funTwo inside funOne can be obtained, so a reference to funTwo is returned, so that the internal variables of funOne can be obtained externally through this funTwo. The local method funTwo in this method is called a closure. In short, functions that have access to variables in the scope of another function are closures.
Why use closures
We know that each function of js is a little black house, it can obtain information from the outside world, but the outside world cannot directly see the content inside. Put the variable myname into the small black room. Except for the funOne function, there is no other way to access the variable myname, and the variable myname with the same name defined outside the function funOne will not affect each other. This is the so-called enhanced "encapsulation" .
Use of closures
Closures can be used in many places. It has two biggest uses. One is to read the variables inside the function mentioned above, and the other is to keep the values of these variables in memory and not be automatically cleared after funOne is called.
Why is this so? The reason is that funOne is the parent function of funTwo, and funTwo is assigned to a global variable, which causes funTwo to always be in memory, and the existence of funTwo depends on funOne, so funOne is always in memory, not after the call ends. ,Be recycled. For example, in a restaurant, the plates are always limited, so the waiter will go to the stage to collect the empty plates, but how dare he collect the plates that still contain dishes?
Notice! !
(1) Because the closure will keep the variables in the function in the memory, the memory consumption is very large, so the closure cannot be abused, otherwise it will cause performance problems of the web page, which may lead to memory leaks in IE. The workaround is to delete all unused local variables before exiting the function.
(2) The closure will change the value of the variable inside the parent function outside the parent function. So, don't change the value of the variable inside the parent function casually.
Common defects
The function with () is the execution function. A simple sentence var myname =funOne; will not be printed, followed by a myname (); will execute the code inside the function.
Summarize
In fact, many methods are given to closures. For example, the store in redux is completed by the closure and observer mode. The application of closures is very extensive and can be matched with many things, so we still have a long way to go. Long, this is just the beginning (to be continued...)
Source: Qianfeng HTML5