Closure is a difficulty in the Javascript language and its feature. Many advanced applications rely on closures to implement.
Closures have three characteristics:
1. Function nested functions
2. The function can refer to external parameters and variables inside
3. Parameters and variables will not be collected by the garbage collection mechanism
Closures refer to functions that have access to variables in the scope of another function. The most common way to create closures is to create another function within one function and access local variables of this function through another function.
There is an advantage of using closures, and it is also a disadvantage of it, which is that it can reside local variables in memory and avoid the use of global variables. Global variables are callable in every module, which is bound to be catastrophic.
Therefore, it is recommended to use private, encapsulated local variables.
After the general function is executed, the local active object is destroyed, and only the global scope is saved in memory. But the closure situation is different!
Closures for nested functions:
function aaa() { var a = 1; return function(){ alert(a++) }; } var fun = aaa(); fun();// 1 After execution a++, then a is still in ~ fun();// 2 fun = null;//a is recycled! !The above output result is 5;
Closures will keep variables in memory all the time, and if used improperly, increase memory consumption.
The principle of garbage collection in javascript
(1) In javascript, if an object is no longer referenced, then the object will be recycled by GC;
(2) If two objects refer to each other and are no longer referenced by the third person, then these two objects refer to each other will also be recycled.
So what are the benefits of using closures? The benefits of using closures are:
1. I hope a variable is stationed in memory for a long time
2. Avoid contamination of global variables
3. The existence of private members
1. Accumulation of global variables
<script>var a = 1;function abc(){ a++; alert(a);}abc(); //2abc(); //3</script>2. Local variables
<script>function abc(){ var a = 1; a++; alert(a);}abc(); //2abc(); //2</script>So how can variable a be achieved that both a local variable and can be accumulated?
3. Accumulation of local variables (that closures can do)
<script>function outer(){ var x=10; return function(){ // function nested function x++; alert(x); }}var y = outer(); // External function is assigned to the variable y;y(); // y function is called once, the result is 11y(); // y function is called the second time, the result is 12, realizing the accumulation</script>Function declarations and function expressions in js:
In js we can declare a function through the keyword function:
<script>function abc(){ alert(123);}abc();</script>We can also use a "()" to turn this declaration into an expression:
<script>(function (){ alert(123);})(); //Then directly call the previous expression through(), so the function does not have to write a name;</script>4. Modular code to reduce pollution of global variables
<script>var abc = (function(){ //abc is the return value of the external anonymous function var a = 1; return function(){ a++; alert(a); }})();abc(); //2; Calling the abc function once is actually calling the return value of the internal function abc(); //3</script>5. The existence of private members
<script>var aaa = (function(){ var a = 1; function bbb(){ a++; alert(a); } function ccc(){ a++; alert(a); } return { b:bbb, //json structure c:ccc }})();aaa.b(); //2aaa.c() //3</script>6. Directly find the index of the corresponding element in the loop
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <script> window.onload = function(){ var aLi = document.getElementsByTagName('li'); for (var i=0;i<aLi.length;i++){ aLi[i].onclick = function(){ //When clicked, the for loop has ended alert(i); }; } } </script> </head> <body> <ul> <li> <li>123</li> <li>456</li> <li>789</li> <li>010</li> </ul> </body> </html>7. Use closures to rewrite the above code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <script> window.onload = function(){ var aLi = document.getElementsByTagName('li'); for (var i=0;i<aLi.length;i++){ (function(i){ aLi[i].onclick = function(){ alert(i); }; })(i); } }; </script> </head> <body> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> </body> </html>