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.
javascript
Principle 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