js闭包
js闭包的官方解释:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。个人理解就是:就是一个在函数内部的函数,他可以访问他的外部函数的变量的AO里面的所有值。当然GO里面的值也可以访问。(在了解闭包前,你必须先了解js的作用域,作用域链)。反过来说,当函数内部包含一个内部函数,并且被返回保存该内部函数,就会产生会产生闭包;这样还是有点抽象,看一个例子;
1 <script type="text/javascript"> 2 //总结:当内部函数被返回到外部并且保存时,一定会产生闭包,闭包会产生 原来的作用域链不释放,过度的闭包会导致内存泄漏,或者加载过慢。 3 function breadMgr(num){ 4 var breadNum = arguments[0] || 0; 5 function supply(){ 6 breadNum += 10; 7 console.log(breadNum); 8 } 9 10 function sale(){ 11 breadNum --; 12 console.log(breadNum); 13 } 14 return [supply,sale]; 15 } 16 17 var breadMgr = breadMgr(50); 18 breadMgr[0](); 19 breadMgr[1](); 20 21 //第二个例子,解释一下结果是什么,为什么//需要联系AO 和GO 22 function test1(){ 23 var arr = []; 24 for(var i = 0;i < 10;i++){ 25 arr[i] = function(){ 26 console.log(i+","); 27 } 28 29 } 30 return arr; 31 } 32 var myArr = test1(); 33 for(var j = 0;j<10;j++){ 34 myArr[j](); 35 } 36 </script>
解析:
breadMgr[0]();的结果是60
breadMgr[0]();的结果是59
下面的for循环下面的结果是 10 个10;
这里,我们先只看第一例子:
1 function breadMgr(num){ 2 var breadNum = arguments[0] || 0; 3 function supply(){ 4 breadNum += 10; 5 console.log(breadNum); 6 } 7 8 function sale(){ 9 breadNum --; 10 console.log(breadNum); 11 } 12 return [supply,sale]; 13 } 14 15 var breadMgr = breadMgr(50); 16 breadMgr[0](); 17 breadMgr[1]();
作用域 GO: breadMgr = function breadMgr(){...}
执行:
AO:breadNum = undefined
breadNum = 50
执行:
supply = function supply(){...}
sale = function sale(){...}
返回 [supply,sale];
breadMgr[0]()的执行结果就是 60;
breadMgr[1]()的执行结果就是59;
第二个例子:
1 function test1(){ 2 var arr = []; 3 for(var i = 0;i < 10;i++){ 4 arr[i] = function(){ 5 console.log(i+","); 6 } 7 8 } 9 return arr; 10 } 11 var myArr = test1(); 12 for(var j = 0;j<10;j++){ 13 myArr[j](); 14 }
预解析 GO: test1= function test1(){....}
myArr = undefined
执行:test1预解析:arr = undefined
执行: arr = []
arr[i] = function(){console.log(i+',")}
总共执行10次,最后i 的结果是10;
这里解释一下,for(var i = 0; i<10;i++) 等同于 var i = 0;if(i<10){i++;.......};所以这里的i就是 10;
i = 10 ,数组下标是 0-9 ,每个值都是function(){console.log(10+',")},
执行 for(var j=0;j<10;j++)后,打印每个结果就是 10 ;
最后还介绍一下,闭包的写法:
1 <script type="text/javascript"> 2 //return 写法 3 function test() { 4 var a = 1; 5 function add() { 6 a++; 7 console.log(a); 8 } 9 return add;//这里 可以写成 window.add = add; 10 } 11 var add = test(); 12 add(); 13 14 // window写法 15 function test2() { 16 var b = 1; 17 function add1() { 18 b++; 19 console.log(b); 20 } 21 window.add1 = add1; 22 } 23 test2(); 24 add1(); 25 </script>
博客园地址:https://www.cnblogs.com/lixiuming521125/