Closure Pack 03

Source: Internet
Author: User

Characteristics of closures

Closures have three properties:

1.函数嵌套函数2.函数内部可以引用外部的参数和变量3.参数和变量不会被垃圾回收机制回收
The definition of closure and its advantages and disadvantages

闭包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 functions
   function 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.

javascriptPrinciple of garbage collection

(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.

Benefits of using closures

So what are the benefits of using closures? The benefits of using closures are:

1.希望一个变量长期驻扎在内存中2.避免全局变量的污染3.私有成员的存在
The summation of global variables
<script>var a = 1;function abc(){ a++; alert(a);}abc(); //2abc(); //3</script>
Second, local variables
<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 variables
<script>function outer(){ var x=10; return function(){ //函数嵌套函数 x++; alert(x); }}var y = outer(); //外部函数赋给变量y;y(); //y函数调用一次,结果为11,相当于outer()();y(); //y函数调用第二次,结果为12,实现了累加</script>
function declarations and function expressions

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 "()":

<script>(function (){ alert(123);})(); //然后通过()直接调用前面的表达式即可,因此函数可以不必写名字;</script>
Four, modular code, reduce the pollution of global variables
<script>var abc = (function(){ //abc为外部匿名函数的返回值 var a = 1; return function(){ a++; alert(a); }})();abc(); //2 ;调用一次abc函数,其实是调用里面内部函数的返回值 abc(); //3</script>
V. The existence of private members
  <script> var AAA = ( function () {var a = 1; function bbb function CCC return {b:bbb, //json structure C:CCC}) (); aaa.b (); //2aaa.c () //3</ SCRIPT>             
Six. Using anonymous functions to implement accumulation
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><Html><Head><MetaCharset=utf-8 "/><Title> Closure Package</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>          
Viii. using 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 "><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>        
Nine. Memory leak issues

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;}  

Closure Pack 03

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.