Home > Developer > JavaScript
(1) Definition:
The function returns a function that returns a function called a closure (the simplest form of personal understanding).
(2) Why use closures?
Local variables are collected by GC after the function has been executed, and sometimes we want to access the internal variables externally, this time we use closures
(3) Closures have two functions:
A. Accessing variables inside functions (functions as return values)
B. Save scope (function as parameter pass)
1 //1. Accessing variables inside functions (functions as return values)2 functionTest () {3 varAge = 18;4 return function(){5 Console.log (age);6 }7 }8 9 varMyTest =test ();TenConsole.log (myTest);//for anonymous functions, function () {Console.log (age)} OneMyTest ();// - A - - the //Another example - functionfn () { - varmax = 10; - return functionBar (x) { + if(X >max) { - Console.log (x); + } A } at } - varF1 =fn (); -Console.log (F1);//function Bar (x) {if (X>max) {console.log (x);}} -F1 (15);//The result is - - in //Save scope (function as parameter pass) - to //Save Scope + functionTest () { - varA = 1;//Local Variables thehehe =function(){//Global Variables *a++; $ };Panax Notoginseng return function(){ - Console.log (a); the } + } A the varhaha = Test ();//at this point haha is the return value after execution of test (), anonymous function functions () {Consolloe.log (a)} +Haha ();//Printing 1 -Hehe ();//The hehe function is a global variable and can be executed outside, here a++ $Haha ();//Printing 2 $Hehe ();//Ibid . - - //Note: The haha is a global variable and will not be recycled by GC, so the return value of the test function persists, and the scope of test is always present and will not be recycled by GC the - //Note: When you take a free variable across a domain, you want to create the scope of the function to take the value, not the "parent scope";Wuyi // the varmax = 10; - varfn =function(x) { Wu if(x>max) { -Console.log (max);//Ten AboutConsole.log (x);// the $ } - }; - -(function(f) { A varmax = 100; +F (15); the}) (FN);
(4) Use of closures
Assuming that there are 5 div nodes on the page, we loop to bind the onclick event to each Div, follow the index order, click the first div to pop up 0, click the 2nd div to pop up 1, and so on.
1 <Body>2 <Div>1</Div>3 <Div>2</Div>4 <Div>3</Div>5 <Div>4</Div>6 <Div>5</Div>7 </Body>
1 //use of closures2 3 varnodes = document.getElementsByTagName (' div ');4 for(vari=0;i<nodes.length;i++){5Nodes[i].onclick =function(){6 Console.log (i);7 }8 }9 //think about it, what's the problem?? Ten //Click on each of the printed 5 is not ... One A - varnodes = document.getElementsByTagName (' div '); - for(vari=0;i<nodes.length;i++){ the(function(i) {//block-level scope or private scope -Nodes[i].onclick =function(){ - Console.log (i); - } + }) (i) - } + //advantages of the above method: the I value of each cycle is closed up
(5) Note points for using closures
Because the closure causes the variables in the function to be stored in memory, the memory consumption is very large,
Therefore cannot abuse the closure, otherwise may cause the webpage the performance question, may cause the memory leak in IE.
JavaScript closures in detail
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
