Closure is a major difficulty in JavaScript, and it is also its feature. Many advanced applications rely on closures.
1. Variable scope
To understand closures, you must first understand JavaScript's special variable scoping.
There are only two types of variable scope: global variables and local variables.
The special thing about JavaScript is that functions can directly read global variables inside them, but local variables inside a function cannot be read outside the function.
Note:When declaring variables inside a function, be sure to use the var command. If you don't, you're actually declaring a global variable!
2. How to read local variables inside a function from the outside?
For various reasons, sometimes we need to access local variables inside a function. However, as mentioned above, under normal circumstances, this is impossible! It can only be achieved through workarounds.
That is, define another function inside the function.
function f1(){
var n=999;
function f2(){
alert(n); // 999
}
}
In the code above, function f2 is included inside function f1. At this point, all local variables inside f1 are visible to f2. But the reverse is not true; local variables inside f2 are not visible to f1.
This is the "chain scope" structure unique to JavaScript.
Child objects will look up level by level to find all parent objects' variables. Therefore, all variables of the parent object are visible to child objects, but not vice versa.
Since f2 can read local variables in f1, as long as we return f2 as the return value, can't we read f1's internal variables from outside f1?
3. The concept of closures
The f2 function in the above code is a closure.
The definitions of closures in various professional literature are very abstract. My understanding is: a closure is a function that can read internal variables of other functions.
Since in JavaScript, only sub-functions inside a function can read local variables, a closure can be simply understood as "a function defined inside another function."
So, in essence, a closure is a bridge that connects the inside of a function with the outside of the function.
4. Uses of closures
Closures can be used in many places. It has two greatest uses: one is to read variables inside a function as mentioned earlier, and the other is to keep the values of these variables in memory at all times, not automatically cleared after f1 is called.
Why is that? The reason is that f1 is the parent function of f2, and f2 is assigned to a global variable. This causes f2 to always be in memory, and f2's existence depends on f1, so f1 is also always in memory and will not be collected by the garbage collection mechanism after the call ends.
Another noteworthy place in this code is"nAdd=function(){n+=1}"This line. First, the var keyword is not used before nAdd, so nAdd is a global variable, not a local variable. Second, the value of nAdd is an anonymous function, and this anonymous function itself is also a closure, so nAdd is equivalent to a setter that can operate on local variables inside the function from outside the function.
5. Points to note when using closures
- (1) Since closures cause variables in functions to be kept in memory, memory consumption is high, so closures cannot be abused, otherwise it will cause webpage performance issues and may lead to memory leaks in IE. The solution is to delete all unused local variables before exiting the function.
- (2) Closures can change the values of variables inside the parent function from outside the parent function. Therefore, if you use the parent function as an object, the closure as its public method, and the internal variables as its private properties, you must be careful not to casually change the values of variables inside the parent function.
Original link: https://www.cnblogs.com/cxying93/p/6103375.html