javaScript--匿名函数和闭包(16)

// 匿名函数:没有名字的函数;

// 闭包:可访问一个函数作用域里的变量的函数;

一 匿名函数

 1 // 普通函数 2     function box(){                       // 函数名是box; 3         return 'Lee';                      4     } 5     box();                                // =>Lee; 调用函数; 6 // 匿名函数 7     function(){                           // 匿名函数,会报错; 8         return 'Lee'; 9     }10 // 通过表达式自我执行11     (function(name){12         console.log(name);               // =>Lee;13     })("Lee");                           // "()"表示执行函数,并且可以传参;14 // 把匿名函数赋值给变量15     var box = function(){                // 将匿名函数赋给变量;16         return 'Lee';17     };18     console.log(box());                  // 调用方式和函数调用相似;19 // 函数里的匿名函数20     function box(){21         return function(name){            // 函数里的匿名函数,产生闭包;22             return name;23         };24     };25     console.log(box()("Lee"));            // 函数box()调用匿名函数,并传参;

二 闭包

// 闭包:有权访问另一个函数作用域中的变量的函数;

// 创建闭包的常见方式:在一个函数内部创建另一个函数;通过另一个函数访问这个函数的局部变量;

 1 // 通过闭包可以返回局部变量 2     function box(){ 3         var user = 'Lee'; 4         return function(){                // 通过匿名函数返回box()的局部变量user; 5             return user; 6         }; 7     } 8     console.log(box()());                // =>Lee; 直接调用box()()来获得匿名函数的返回值; 9 10     var b = box();11     console.log(b());                    // =>Lee; 另一种调用匿名函数方式;12 13 // 优点:可以把局部变量驻留在内存中,可以避免使用全局变量;  14 // (全局变量污染导致应用程序不可预测性,每个模块都可调用必将引来灾难;所以推荐使用私有的,封装的局部变量);

 1 // 缺点: 2 // 通过全局变量来累加 3     var age = 100;                        // 全局变量; 4     function box(){ 5         age++;                            // 模块级可以调用全局变量,进行累加; 6     }; 7     box();                                // 执行函数,累加一次; 8     console.log(age);                     // =>101; 输出全局变量; 9     box();                                // 执行函数,累加一次;10     console.log(age);                     // =>102; 输出全局变量;11 // 通过局部变量无法实现累加12     function box(){13         var age = 100;14         age++;                            // 实现累加;15         return age;16     }17     console.log(box());                   // =>101;18     console.log(box());                   // =>101; 无法实现累加,因为第二次调用函数时,函数内部变量age又被初始化了;19 20 // 通过闭包可以实现局部变量的累加21     function box(){22         var age = 100;23         return function(){                // 匿名函数内实现累加;24             age++;25             return age;                   // 并返回累加后的变量; 26         };                                // 此时box()函数的局部变量age的值已经被修改为累加后的值;27     }28     var b = box();                        // 给box()函数赋值给变量;29     console.log(b());                     // =>101; 调用匿名函数,累加一次;30     console.log(b());                     // =>102; 第二次调用匿名函数,累加两次;31 32 // PS:由于闭包里作用域返回的局部变量资源不会被立刻销毁回收,所以可能会占用更多的内存;所以过度使用闭包会导致性能下降;(将闭包引用在"私有作用域"中即可实现变量销毁)33 // 作用域链的机制导致一个问题,在循环中里的匿名函数取得的任何变量都是最后一个值; ?

 1 // 循环里包含匿名函数 2     function box(){ 3         var arr = []; 4         for(var i=0; i<5; i++){         // 当声明变量i=5时,循环停止;而此时循环里的变量i==5;  5             arr[i] = function(){        // arr[i]得到的只是没有执行的匿名函数function(){}; 6                 return i;                 7             }; 8         }; 9         return arr;                     // arr = [function,function,function,function,function];10     }11     var b = box();                      // =>[function,function,function,function,function]; 得到函数box()返回的数组arr;12     console.log(b.length);              // =>5; 得到函数集合数组长度;13     for(var i=0; i<b.length; i++){14         console.log(box()[i]());        // =>5,5,5,5,5; 输出每个函数的值,都是最后一个值;15     }16     // 上面的例子输出的结果都是5,也就是循环后得到的最大i值;17     // 因为b[i]调用的是匿名函数,匿名函数并没有自我执行,等到调用的时候,box()已执行完毕,i早已变成5;18 19 // 循环里包含匿名函数-改1,自我执行匿名函数20     function box(){21         var arr = [];22         for(var i=0; i<5; i++){23             arr[i] = (function(num){    // arr[i]得到的是匿名函数执行后的结果数值0-4;24                 return num; 25             })(i);                      // 自我执行并传参;26         }27         return arr; 28     }29     var b = box();                      // =>[0,1,2,3,4];  此时b代表box()返回的数组;30     for (var i = 0; i < b.length; i++) {31         console.log(b[i]);              // 0 1 2 3 4; 这里返回的是数值;32     };33     // 例子中,我们让匿名函数进行自我执行,导致最终返回给a[i]的是数组而不是函数了;最终导致b[0]-b[4]中保留了0,1,2,3,4的值;34 35 // 循环里包含匿名函数-改2,匿名函数里再做个匿名函数;36     function box(){37         var arr = []; 38         for(var i=0; i<5; i++){39             arr[i] = (function(num){40                 return function(){      // 返回函数;41                     return num;            42                 }43             })(i);44         }45         return arr;                     // arr = [function,function,function,function,function];46     }47     var b = box();48     for (var i = 0; i < b.length; i++) {49         console.log(b[i]());            // 0,1,2,3,4; 50     };51 52 // 改1和改2中,我们通过匿名函数自我执行,立即把结果赋值给arr[i];53 // 每一个i,是调用方通过按值传递的,所以最终返回的都是指定的递增的i;而不是box()函数中的变量i;

三 this对象

 1 // 在闭包中使用this对象可能会导致一些问题;this对象是在运行时基于函数的执行环境绑定的; 2 // 如果this在全局范围就是指向window,如果在对象内部就指向这个对象; 3 // 而闭包却在运行时指向window的,因为闭包并不属于这个对象的属性或方法;  4     var user = 'Window'; 5     var obj = { 6         user:'Object', 7         getUserFunction:function(){ 8             return function(){                        // 闭包不属于obj,里面的this指向window; 9                 return this.user;10             };11         }12     };13     console.log(obj.getUserFunction()());            // =>Window;14 15     // 可以强制指向某个对象16     console.log(obj.getUserFunction().call(obj));    // =>Object;17 18     // 也可以从上一个作用域中的得到对象19     getUserFunction:function(){20         var that = this;                             // 从对象的方法里得到this;此时that指向obj对象;21         return function(){22             return that.user;23         }24     }25     console.log(obj.getUserFunction()());            // =>Object;

四 内存泄漏

 1 // 由于IE的JScript对象和DOM对象使用不同的垃圾收集方式,因此闭包在IE中会导致内存泄漏问题,也就是无法销毁驻留在内存中的元素; 2     function box(){ 3         var oDiv = document.getElementById('oDiv');  // oDiv用完之后一直驻留在内存中; 4         oDiv.onclick = function(){ 5             alert(oDiv.innerHTML);                   // 这里用oDiv导致内存泄漏; 6         }; 7         oDiv = null;                                 // 解除引用; 8     } 9     box();10     // 由于匿名函数保存了一个对box()的活动对象的引用,因此就会导致无法减少oDiv的引用数;11     // 只要匿名函数存在,oDiv的引用数至少也是1;因此它所占用的内存就永远不会被回收;12     // PS:如果没有使用解除引用,那么要等到浏览器关闭才得以释放;

五 模仿块级作用域(定义并立即调用一个匿名函数)

 1 // JS没有块级作用域的概念; 2 // 这意味着在块语句(for语句/if语句)中定义的变量,实际上是在包含函数中而非语句中创建的; 3     function box(count){ 4         for(var i=0; i<count; i++){}                // box(2); => count=2; i=2时循环停止,此时i=2; 5         console.log(i);                             // =>2; i不会因为离开了for块就失效; 6     } 7     box(2); 8  9     function box(count){10         for(var i=0; i<count; i++){}11         var i;                                      // 就算重新声明,也不会覆盖前面的值;12         console.log(i);13     }14     box(2);15 // 在Javascript中,变量i是定义在box()的活动对象中的,因此从它有定义开始,就可以在函数内部随处访问它;16 // 以上两个例子,说明JavaScript没有块级语句的作用域,if(){}/for(){}等没有作用域;17 // 如果有作用域的话,出了这个范围i就应该被销毁;18 19 // JavaScript不会提醒是否多次声明了同一个变量;遇到这种情况,它只会对后续的声明视而不见(如果是初始化并赋值,还是会执行的);20 21 // 模仿块级作用域(私有作用域)22     (function(){23         // 这里是块级作用域;24     })();25     // 以上代码定义并立即调用了一个匿名函数;将函数声明包含在一对圆括号中,表示它实际上是一个函数表达式;26 27 // 使用块级作用域(私有作用域)改写28     function box(count){29         (function(){30             for(var i=0; i<count; i++){}31         })();32         console.log(i);                                // 报错,无法访问;变量i在私有作用域中,出了私有作用域即被销毁了.33     }34     box(2);35 // 使用了块级作用域后,匿名函数中定义的任何变量,都会在执行结束时被销毁;(i只能在循环中使用,使用后即被销毁);36 // 而私有作用域中能够访问变