匿名函数和闭包
Posted 党兴明
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了匿名函数和闭包相关的知识，希望对你有一定的参考价值。
闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的常见的方式，就是在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量。
//闭包可以返回局部变量 function box(){ var age = 100; return function(){ return age; } } alert(box()());//100
使用闭包有一个优点，也是它的缺点：就是可以把局部变量驻留在内存中，可以避免使用全局变量。(全局变量污染导致应用程序不可预测性，每个模块都可调用必将引来灾难，所以推荐使用私有的，封装的局部变量)。
如果要实现累加功能：可以使用全局变量也可以使用闭包
//累加 var age = 100; //通过全局变量 function box(){ age++; } box(); box(); box(); alert(age); //103 function box(){ //使用匿名函数实现局部变量驻留内存从而进而累加 var age = 100; return function(){ age++; return age; }; } var b =box(); //不能通过box()();来调用，这样每次都初始化age=100; b(); b(); alert(b());//103 b=null; //当不用时解除引用，等待垃圾回收
作用域链的机制导致一个问题，在循环中里的匿名函数取得的任何变量都是最后一个值。
下面的例子输出的结果都是5，也就是循环后得到的最大的i值。因为b[i]调用的是匿名函数，匿名函数并没有自我执行，等到调用的时候，box()已执行完毕，i早已变成5，所以最终的结果就是5个5。
改1和改2中（两者原理一样），我们通过匿名函数自我执行，立即把结果赋值给a[i]。每一个i，是调用方通过按值传递的，所以最终返回的都是指定的递增的i。而不是box()函数里的i。
//循环里的匿名函数取值问题 function box(){ var arr=[]; for(var i=0;i<5;++i){ arr[i]=function(){ //目的是arr[0]=1,arr[1]=2 ... return i; }; } return arr; } alert(box()); //返回每个都是匿名函数体的数组 var b = box(); for(var i = 0;i<5;++i){ alert(b[i]()); //都是5 } //改进1:自我执行匿名函数 function box(){ var arr=[]; for(var i=0;i<5;++i){ arr[i]=(function(num){ //通过自我及时执行匿名函数 return num; })(i); } return arr; } var b = box(); for(var i = 0;i<5;++i){ alert(b[i]); } //改进2：匿名函数下再做个匿名函数 function box(){ var arr=[]; for(var i=0;i<5;++i){ arr[i]=(function(num){ return function(){ return num; } })(i); } return arr; } var b = box(); for(var i = 0;i<5;++i){ alert(b[i]()); }
闭包中使用this对象也可能会导致一些问题，this对象是在运行时基于函数的执行环境绑定的，如果this在全局范围就是window，如果在对象内部就指向这个对象。而闭包却在运行时指向window的，因为闭包并不属于这个对象的属性或方法。
var box ={ getThis:function(){ return function(){ return this; } } } alert(box.getThis()()); //指向window对象 var user = ‘The Window‘; var box = { user:‘The Box‘, getUser:function(){ return this.user; } } alert(box.getUser()); //The Box var user = ‘The Window‘; var box = { user:‘The Box‘, getUser:function(){ return function(){ return this.user; } } } alert(box.getUser()()); //The Window //如果想打印出Box，可以对象冒充 var user = ‘The Window‘; var box = { user:‘The Box‘, getUser:function(){ return function(){ return this.user; } } } alert(box.getUser().call(box)); //The Box //还可以 var user = ‘The Window‘; var box = { user:‘The Box‘, getUser:function(){ //这里的this是Box var that = this; return function(){ //这里的this是Window return that.user; //用上边的that } } } alert(box.getUser().call(box)); //The Box
内存泄漏
由于IE的JScript对象和DOM对象使用不同的垃圾收集方式，因此闭包在IE中会导致一些问题。就是内存泄漏的问题，也就是无法销毁驻留在内存中的元素。以下代码有两个知识点还没有学习到，一个是DOM，一个是事件。
html：
<body> <div id="oDiv">lee</div> <script src="闭包.js"></script> </body>
js:
function box() { var oDiv = document.getElementById(‘oDiv‘); //oDiv用完之后一直驻留在内存 oDiv.onclick = function () { alert(oDiv.innerHTML); //这里用oDiv导致内存泄漏 }; } box(); //问题解决 function box(){ var oDiv = document.getElementById(‘oDiv‘); var text = oDiv.innerHTML; //通过text得到 oDiv.onclick = function(){ alert(text); //用text，如果oDiv.innerHTML时，如果下面进行了手动清理，会不能点 //alert(oDiv.innerHTML); //这样写会报错，因为下边已经进行了清理 } oDiv = null; //手动清除内存 } box();
模仿块级作用域：javascript没有块级作用域的概念，比如for if语句。
包含自我执行的匿名函数，就可以实现私有作用域
//问题如下： function box(){ for(var i=0;i<5;++i){ } var i; //就算重新声明，也不会影响前面的值 alert(i); //可以访问i,说明js没有块级作用域 } box(); //5 //使用块级作用域 //使用了块级作用域(私有作用域)后，匿名函数中定义的任何变量，都会在执行结束时被销毁。
//这种技术经常在全局作用域中被用在函数外部，从而限制向全局作用域中添加过多的变量和函数。 function box(){ (function(){ //包含自我执行的匿名函数，就可以实现私有作用域 for(var i=0;i<5;++i){ alert(i); } })(); //出了这个私有作用域，变量立即被销毁 alert(i); //这里就不认识了，这里会报错，i没有定义 } box(); (function(){ //这里就是全局的私有作用域，出了这里就自动销毁了 })();
私有变量
JavaScript没有私有属性的概念；所有的对象属性都是公有的。不过，却有一个私有变量的概念。任何在函数中定义的变量，都可以认为是私有变量，因为不能在函数的外部访问这些变量。
//什么是私有变量 function box(){ var age = 100; //私有变量,外部不能访问 } function Box(){ this.age = 100; //属性，公有 this.run = function(){ //方法，公有 return "运行中"; }; } var box = new Box(); alert(box.age); //运用私有变量 function Box(){ var age = 100; //私有变量 function run(){ //私有函数 return "运行中"; } this.publicGo = function(){ //对外可见的公共接口，特权方法 return age + run(); }; this.getAge = function(){ return age; } } var box = new Box(); alert(box.getAge()); //通过构造函数传参，访问私有变量 function Box(value){ var user = value; this.getUser = function(){ return user; } this.setUser = function(value){ user = value; } } var box = new Box(‘Lee‘); alert(box.getUser()); //lee box.setUser("dang"); alert(box.getUser()); //还是lee
静态私有变量
通过块级作用域(私有作用域)中定义私有变量或函数，同样可以创建对外公共的特权方法。
//使用静态私有变量：进行共享 (function(){ var user = ""; // function Box(){} Box = function(value){//采用的是Box = function () {} 而不是function Box() {} 因为如果用后面这种，就变成私有函数了，无法在全局访问到了 user = value; }; Box.prototype.getUser = function(){ //和上面比实现了共享 return user; }; })(); var box = new Box(‘Lee‘); alert(box.getUser()); var box2 = new Box(‘Lee‘); alert(box.getUser()); //使用了prototype导致方法共享了，而user也就变成静态属性了。(所谓静态属性，即共享于不同对象中的属性)。
模块模式
之前采用的都是构造函数的方式来创建私有变量和特权方法。那么对象字面量方式就采用模块模式来创建。
//什么叫单例，只能实例化一次 var box = { //字面量对象，也是单例对象 age : 100, //这是公有属性，将要改成私有 run : function () { //这时公有函数，将要改成私有 return ‘运行中...‘; }; }; //字面量实现私有变量 var box = function(){ var user = ‘lee‘; function run(){ return "运行中"; } return{ publicGo:function(){ return user+run(); } }; }(); alert(box.publicGo()); //lee运行中 var box = function(){ //或者这样写 var user = ‘lee‘; function run(){ return "运行中"; } var obj={ publicGo:function(){ return user+run(); } }; return obj; }(); alert(box.publicGo()); //lee运行中 //增强模块模式，这种模式适合返回自定义对象，也就是构造函数。 function Desk(){} var box = function(){ //或者这样写 var user = ‘lee‘; function run(){ return "运行中"; } var desk = new Desk(); desk.go = function(){ return user + run(); }; return desk; }(); alert(box.go()); //lee运行中
以上是关于匿名函数和闭包的主要内容，如果未能解决你的问题，请参考以下文章