Meaning closures
The official definition: closure is the function inside the function .
Is not it a little difficult to understand? Nothing, Xiao Bian here to explain to you.
A function nested within the function B, function B can gain access to a function of the external variables A, and forms a space does not destroy function, which is the closure.
Therefore, the closure is formed with three necessary conditions:
- A function in the interior of a return function directly or indirectly B
internal 2. B function uses the private variables (private data) A function
3. A variable external function has a function of receiving the B
Note: The above conditions are indispensable! ! !
The role of closures
Now that you know the closures, closures that gotta know what role in our development work in it. For example, when you need to extend the life cycle of variables or when you need to access an internal function of a private data, you can use a closure to solve. He did not talk much, we direct example.
Code One:
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</body>
<script>
var btns = document.querySelectorAll('button')
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
console.log(i)
}
}
</script>
effect:
Click the button above you will find that no matter which button you click on, spooling out of all 4. Just because our string of code that have i = 0, i = 1, i = 2, i = 3 four content, whether you have not clicked the button for the cycle will be executed when you click the button, the for loop has been executed is completed, the value of i has been circulated to 5, and each time you click on all the time will print 5.
That if you want to achieve the results we expected in, when print 1 0 click, click when printing 1 2, 3 when printing 2 Click, click 4, when printing 4, that this time we have to use the closure function .
Code II:
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</body>
<script>
var btns = document.querySelectorAll('button')
function A(j){
btns[j].onclick = function(){
console.log(j);
}
}
for(var i=0;i<btns.length;i++){
A(i)
}
</script>
effect:
The second is the code we use to extend the closure period variables, so we expected result out of it.
Problems caused by the closure
Our closures, although easy to use, but good things will drawbacks.
- Each form a closure, there will be a space that will not be destroyed, it would take up too much memory, if too large,
it will lead to memory overflow, that final result is a memory leak. Sounds horrible, when we all have problems, do not worry use function closures, there are other ways to use other solutions, there is no way of time, and then use a closure. In short, be used with caution! ! !
Features closure package
Closure function is not only powerful, it also features and special. Closures are part of the advantages and disadvantages coexist, below, Xiao Bian gave you sum up the characteristics of closure function.
-
And prolong the lifetime of variables
advantage: because the execution space does not destroy, destroy variables nor
disadvantages: because the execution space is not destroyed, will always exist in memory -
Private variables can be accessed within the function
private variables using the closure function can access internal functions: Advantages
Disadvantages: execution space will not be destroyed, it will always exist in memory -
Protection of private variables (as long as the function, it is this feature)
Benefits: protection of private variables are not accessible outside
drawback: if the access is necessary to take advantage of the closure function
At home against the war, fearless epidemic, refueling Wuhan, China refueling, humans win! ! !
