JavaScript closures (closure)

Closures actually take advantage of the knowledge of function scopes and anonymous functions, and when function a executes, part of the variable is referenced by B and the referenced variable cannot be released, forming the so-called closure. Here is a very good article, you can refer to.

Let's look at a small example:

JavaScript

12345678910

function show(){ var n=3;     settimeout (function ({alert ( "first:" + n) ;} ,3000) ; //3 seconds after first:3 alert("Second:"+n); //Display second:3 }show(); function show2(){ alert("End of the first function execution"); }show2();

After running the above function, the alert first displays "Second:3″, then the first function execution end" and "First:3" is displayed after 3 seconds.

Take a closer look at the end of the function show execution, the variable n should be released, the memory will not exist, how can it be 3 seconds to show "First:3″?" The closure is precisely here, when the function show execution end, want to free memory of N, but found that the variable n is also referenced by an anonymous function, to be called after 3 seconds, according to the principle of JavaScript closure, the memory of n is preserved, so after three seconds can still call N.

Here are a few ways to read the difference:

JavaScript

1234567

function show2(content){ alert(content); //3 seconds after alert displays "test" }function show(content,delay_time){ setTimeout("Show2 ('"+content+"')",delay_time); }Show("test",+);

A closer look at the above notation is not a closure, just a normal function call.

JavaScript

1234	function show(content,delay_time){ setTimeout(function(){alert(content)}, Delay_time); //3 seconds after alert displays "test" }Show("test",+);

This is a closure, although the results are the same, but the principle is different.

JavaScript

123456

function show(content){ function show2(){alert(content);} return show2; }var newshow=show("test"); setTimeout(newshow,N); //3 seconds after alert displays "test"

The above is also a closure, although the results are the same, but the principle is not the same. This is seen in the function can also be passed as an object, function show executes return show2, the function Show2 assigned to NewShow, and then 3 seconds later, call NewShow object, execute function show2.

Careful comparison of the above 3 kinds of writing, if you can realize some truth, closures are sometimes difficult to understand.

A slightly more complicated example:

JavaScript

123456789101112

var show=null; (function(){ var n=1; var show2=function(){ Alert(n+ +);    } Show=show2; })();show(); //Show 1 show(); //Show 2 show(); //Show 3

In the above code, once again, the function is passed as an object, and n is the local variable in the anonymous function, which is not accessible externally. Show is a global variable, should not access the variable n, but before the function show execution, the function of the anonymous function of the internal show2 assignment to show, when the next function show run, will call Show2 code, and Show2 can access n, so the results are displayed as 1, 2, 3.

Another noteworthy, but also a very classic example.

CSS

123	/**css Code **/ul{ width:600px; margin:0px auto;} ul Li{ margin:1px 0px; background-color:#999999;}

XHTML

1234567

<!--HTML code:--> <ul    <li>1< Span class= "Crayon-r" ></LI>    <li>2</LI> Span class= "Crayon-i" >   <li>3 </LI>    <li>4 </LI> </UL>

JavaScript

1234	var li = document. getElementsByTagName("li"); for (var i=0 i<li.length; I++) { Li[i]. OnClick = function(){alert(i);} }

After running, regardless of which Li is clicked, it is alert prompt "4". This is a place to note: Closures allow the inner layer function to refer to a variable in the parent function, but the variable is the final value. A closure reference to the variable I, is the value after the end of the loop, in fact, this is a very common problem, there are many ways to solve.

It is more common to add property values to Li[i, such as li[i].n=i, and to solve the problem with closures, the function itself is a closure, the so-called closure to solve the problems of closures. The code is as follows:

JavaScript

123456

var li=document. getElementsByTagName("li"); for(var i=0; I<li. Length; I+ +){ (function(index){ li[index]. OnClick=function(){alert(index);} })(i); }

JavaScript closures (closure)