Closures are powerful, but the results are often unexpected if the concept of closures is not properly understood. For example, here is a more common question <div id= "Test" >
<div> First </div>
<div> a 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, the feedback is the content of the 4th Div. The reason for this is that each div's Click event forms a closure with the test method, and each div's Click event shares the same closure scope chain. When the event is triggered, the subscript represented by the variable i is already pointing to the 4th Div. There are several ways to avoid problems caused by closures.
(1) using this to convert the scope chain context of the closure, the closure of the above example 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 the event that clicked on the div was triggered, the scope of the lookup was already the context specified by "this". Although the event is still within the "test" closure, there is no problem caused by a variable being referenced in the closure scope because the context of the closure is not accessed or is not used.
(2) Make the event of the click Div and the For loop form a closure, and the variable div within the For loop is not recycled. Such as:
Define closure methods 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);
}
}
}
Out-of-loop definition closure method
for (var i = 0; i < els.length; i++)
{
var div = els[i];
A (div);
}
function A (O)
{
O.onclick = function ()
{
alert (o.innerhtml);
}
}
Use the anonymous method, which is similar in principle to a for-loop definition
for (var i = 0; i < els.length; i++)
{
var div = els[i];
(Function (o)
{
O.onclick = function ()
{
alert (o.innerhtml);
}
}) (div);
}
By intermediate method A or anonymous method, the for loop body and the onclick thing generate closures.
(3) The scope of the control variable, so that the event of clicking the div requires a variable that is independent of the outer scope. Such as:
for (var i = 0; i < els.length; i++)
{
(Function ()
{
var div = els[i];
Div.onclick = function ()
{
alert (div.innerhtml);
}
})();
}
Intrinsic functions themselves may also have intrinsic functions. Each time the scope chain is nested, the new activity object that is raised by the execution environment that creates the intrinsic function object is incremented. The ECMA262 specification requires that the scope chain be temporary, but the length of the scope chain is not limited. The unspoken rule of a closure is the relationship between the function and the context of the internal chain of functions defined by the interior. If used properly, nested intrinsic functions have the potential to exceed our imagination.
JavaScript avoids problems caused by closures
