Home > Developer > Web Develop
Closure ( closure ) is Javascript a difficult language, but also its characteristics, many high-level applications are dependent on the implementation of closures.
Closures have three properties:
The definition of closure and its advantages and disadvantages1.函数嵌套函数2.函数内部可以引用外部的参数和变量3.参数和变量不会被垃圾回收机制回收
闭包is a function that has access to a variable in another function scope, the most common way to create a closure is to create another function within one function and access the local variables of the function through another function
The disadvantage of closures is that resident memory increases memory usage and is prone to memory leaks if used improperly.
Closures are javascript a major feature of language, the main application of closures is mainly to: design private methods and variables.
After the general function is executed, the local active object is destroyed and only the global scope is saved in memory. But the case of closures is different!
Closure of nested functionsfunction aaa() { var a = 1; return function(){ alert(a++) }; } var fun = aaa(); fun();// 1 执行后 a++，，然后a还在~ fun();// 2 fun = null;//a被回收！！
Closures cause variables to always be kept in memory, which increases memory consumption if used improperly.
javascript(1), in javascript , if an object is no longer referenced, then the object will be GC recycled;
(2), if two objects refer to each other and are no longer referenced by the reference 3 , then the two objects referenced by each other are also recycled.
So what are the benefits of using closures? The benefits of using closures are:
The summation of global variables1.希望一个变量长期驻扎在内存中2.避免全局变量的污染3.私有成员的存在
Second, local variables<script>var a = 1;function abc(){ a++; alert(a);}abc(); //2abc(); //3</script>
<script>function abc(){ var a = 1; a++; alert(a);}abc(); //2abc(); //2</script>
So how can you do variable A is both local and additive?
Third, the accumulation of local variablesfunction declarations and function expressions<script>function outer(){ var x=10; return function(){ //函数嵌套函数 x++; alert(x); }}var y = outer(); //外部函数赋给变量y;y(); //y函数调用一次，结果为11，相当于outer()()；y(); //y函数调用第二次，结果为12，实现了累加</script>
In JS we can function declare a function by the keyword:
<script>function abc(){ alert(123);}abc();</script>
We can also turn this declaration into an expression by using a "()":
Four, modular code, reduce the pollution of global variables<script>(function (){ alert(123);})(); //然后通过()直接调用前面的表达式即可，因此函数可以不必写名字；</script>
V. The existence of private members<script>var abc = (function(){ //abc为外部匿名函数的返回值 var a = 1; return function(){ a++; alert(a); }})();abc(); //2 ；调用一次abc函数，其实是调用里面内部函数的返回值 abc(); //3</script>
Six. Using anonymous functions to implement accumulation<script> var AAA = ( function () {var a = 1; function bbb function CCC return {b:bbb, //json structure C:CCC}) (); aaa.b (); //2aaa.c () //3</ SCRIPT>
Use anonymous functions to implement local variables residing in memory, thereby accumulating<ScriptType="Text/javascript" > function box () {var age = 100; return function ( {//anonymous function age++; return age;}; } var B = box (); alert (b ()); alert (b ()); //is alert (box ()); alert (b ()); alert (b); //function () {//age++; //return age; //}b = null; //dereference, waiting for garbage collection </SCRIPT> Excessive use of closures can result in degraded performance. function, the closure is generated by the anonymous function in the
Find the index of the corresponding element directly in the loop <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><Htmlxmlns="Http://www.w3.org/1999/xhtml"xml:lang="EN" ><Head><Metahttp-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(){The For Loop has ended alert (i) when clicked; }; } }</Script></Head><body> <ul> <li>123</li> <li>456</ li> <li>789</li> <li>010</li> </ ul> </body> </html> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><Htmlxmlns="Http://www.w3.org/1999/xhtml"xml:lang="EN" ><Head><Metahttp-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> Because IE js objects and DOM objects use different garbage collection methods, closures IE can cause a memory leak problem, which means that elements residing in memory cannot be destroyed
functionClosure(){var odiv =document.getElementById (' Odiv '); //odiv always resides in memory after it is exhausted Odiv.onclick = function () {alert (' odiv.innerhtml '); This causes memory leaks with odiv};} Closure (); //The Odiv should finally be dereferenced to avoid memory leaks function closure() { var odiv = document.getElementById (' Odiv ' ); var test = odiv.innerhtml; Odiv.onclick = function () {alert (test);}; odiv = null;} JS closure details-Go from friends TRIGKIT4
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
