<div id= "Test" >
<div> First </div>
<div> Second </div>
<div> a third </div>
<div> Fourth </div>
</div>
<script>
function test ()
{
var els = document.getElementById ("Test"). getElementsByTagName ("div");
for (var i = 0; i < els.length; i++)
{
var div = els[i];
Div.onclick = function ()
{
alert (div.innerhtml);
return false;
}
}
}
Test ();
</script>
No matter which div we click, feedback is the content of the 4th Div. The reason is that each div click event with the test method formed a closure, and each div click events share the same closure scope chain. When the event is triggered, the subscript represented by the variable I already points to the 4th Div. There are several ways to avoid problems caused by closures.
(1) Using this to transform the scope chain context of the closure, the closure of the example above can be rewritten as:
for (var i = 0; i < els.length; i++)
{
var div = els[i];
Div.onclick = function ()
{
alert (this.innerhtml);
return false;
}
}
When a click on a div event is triggered, the lookup scope is already the context specified by "this". Although the event is still in the "test" closure, there is no problem with a reference to a variable in the closure scope because the context of the closed package is not accessed or is not used.
(2) The event of the click Div and the For loop form a closure, and the variable div within the For loop is not reclaimed. Such as:
To define a closure method within a for loop
for (var i = 0; i < els.length; i++)
{
var div = els[i];
A (div);
function A (O)
{
O.onclick = function ()
{
alert (o.innerhtml);
}
}
}
To define a closure method outside of a for loop
for (var i = 0; i < els.length; i++)
{
var div = els[i];
A (div);
}
function A (O)
{
O.onclick = function ()
{
alert (o.innerhtml);
}
}
The principle of using an anonymous method is similar to that defined in the For loop
for (var i = 0; i < els.length; i++)
{
var div = els[i];
(Function (o)
{
O.onclick = function ()
{
alert (o.innerhtml);
}
}) (div);
}
By means of intermediate method A or anonymous method, the for loop body produces a closure with the onclick thing.
(3) control the scope of the variable, so that the need to click the div event variables and the outer scope is irrelevant. Such as:
for (var i = 0; i < els.length; i++)
{
(Function ()
{
var div = els[i];
Div.onclick = function ()
{
alert (div.innerhtml);
}
})();
}
Intrinsic functions may also have intrinsic functions. Nesting each time the scope chain increases the new active object that is raised by the execution environment that created the internal function object. The ECMA262 specification requires that the scope chain is temporary, but does not restrict the length of the scope chain. The latent rule of closure is the relationship between the function and the context of the interaction domain chain between the defined function. If used properly, nested internal functions have the potential to exceed our imagination.
