Transfer from https://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
First, the scope of variables
To understand closures, Javascript must first understand the special variable scope.
Scope of a variable is nothing more than two types: global and local variables.
Javascript language so special, it is that internal function Global variables can be read directly.
var n = 999;
function f1(){
alert(n);
}f1 (); // 999
On the other hand, can not be read outside the natural function of local variables within the function.
function f1 () {
were n = 999;
}alert(n); // error
There is a need to pay attention, when you declare a variable inside a function, be sure to use the var command. If you do not, you actually declare a global variable!
function f1(){
n=999;
}f1 ();
alert(n); // 999
Second, how to read a local variable from outside?
For various reasons, we sometimes need to get a local variable within the function. However, as already said, under normal circumstances, this can not be done, can be achieved only through alternative methods.
That it is, inside the function, and then define a function.
function f1(){
var n = 999;
function f2(){
alert(n); // 999
}}
In the above code, the function f2 are included in the internal functions f1, f1 time all local variables inside of f2 is visible. But the reverse is not, local variables inside of f2, f1 is to be invisible. This is the Javascript language-specific "scope chain" structure (chain scope), a sub-objects up to find all the variables of a parent object to. So, all variables parent object, child objects are visible, not vice versa.
Since f1 f2 can be read in a local variable, so long as f2 as a return value, we can not read its internal variables outside f1 yet!
function f1(){
var n = 999;
function f2(){
alert(n);
}return f2;
}
was Result = f1 ();
result(); // 999
Third, the concept of closures
A code on the f2 function is closure.
"Closure" on a variety of professional literature (closure) definition is very abstract, difficult to understand. My understanding is that the closure is a function of internal variables can be read by other functions .
Since the Javascript language, only the internal function subroutine to read local variables, the closure can be simply interpreted as "a defined function within the function."
Therefore, in essence, the closure is an internal bridge function and the function of connecting external.
Fourth, the use of closure
Closures can be used in many places. It's most useful for two, one is the aforementioned variables can be read inside the function, and the other is to make the values of these variables remain in memory.
How to understand the Bible? Consider the following code.
function f1(){
var n = 999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}return f2;
}
was Result = f1 ();
result(); // 999
nAdd();
result(); // 1000
In this code, result is actually a closure function f2. It operates a total of twice, the first time the value is 999, the second value is 1000. This proves that the function f1 in the local variable n has been stored in memory, and not automatically cleared after f1 call.
Why is this so? The reason is that the parent function f1 is f2, and f2 is assigned to a global variable, which leads to f2 is always in memory, and relies on the presence of f1 and f2, f1 therefore always in memory, and not after the end of the call , the garbage collection (garbage collection) recovered.
Another noteworthy this code place, that "nAdd = function () {n + = 1}" the line, not used in the first front nAdd var keyword, thus Nadd is a global variable, rather than the local variable. Second, the value is an anonymous function nAdd (anonymous function), and this anonymous function itself is a closure, it is the equivalent of a nAdd the setter, may operate on local variables inside a function outside the function.
Fifth, the use of closures Precautions
1) Due to the closure will make the function of the variables are stored in memory, memory consumption is large, it can not be abused closure, otherwise it will cause performance problems webpage in IE may lead to memory leaks. The solution is, before exiting the function will delete all local variables are not used.
2) Closure will function outside the parent, the parent function changes the value of the internal variable. So, if you take the parent function as an object (object) to use, the closure of its public methods (Public Method) as, the internal variable as its private property (private value), then you must be careful not to just change the value of the parent function of internal variables.