Home > Web Front-end > JS Tutorial > A few simple sentences explaining JavaScript closures_javascript skills

A few simple sentences explaining JavaScript closures_javascript skills

WBOY
Release: 2016-05-16 18:11:46
Original
990 people have browsed it

What is the stack area and pre-execution process that have not released resources? Let us use the most common example to explain:
For example, now we have a ul with many li below it. We need to traverse them and bind click events to them. And after clicking, pass the current subscript to another function for additional processing:

Copy code The code is as follows:

for(var i=0; i agroup[i].onclick = function() {
 handler(i);
 }
}

The execution result is obvious, right? In the handler, get the passed parameter i, and all you will see is the largest subscript. At this time, we usually use the following method Solution:
Copy code The code is as follows:

for(var i=0; i agroup[i].i = i
agroup[i].onclick = function() {
handler(this.i);
}
}

So here, let’s talk about the pointing issue of this. Generally speaking, this in JavaScript points to the object that currently references it. Above we have added a new attribute called i to this, and its value is the current subscript value.
So how to solve this problem using closure? In fact, the principle is the same. We need to save the i value in advance, or call it transfer:
Copy code The code is as follows:

for(var i=0; i agroup[i].onclick = function(index) {
return function() {
handler (index);
 }
 }(i);
}

At this time you will get the correct subscript. How is this similar to adding the i attribute? ? That is, they all pass or store the subscript i value in advance. In the above demonstration, the function referenced by onclick is pre-executed, and this
function returns an inline function, forming a stack area with no released resources, and the i value is changed to the parameter during pre-execution. The form is passed into this scope (there is a problem with the explanation ability, I don’t know if this explanation is accurate, please give me a try).
To sum up, the role of closure is usually to change the scope or pre-execution. It should be clear to the reader that the examples given above are very limited. The application range of closures is very wide. Only by understanding its cause and effect can you use it flexibly.
auntion 2011-11-15
mail Auntion@gmail.com
QQ 82874972
Original article, please respect the hard work of typing and the rights of the author. Please do not delete the author information here when reprinting.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template