概述
在JavaScript前端开发中，函数与对其状态即词法环境（lexical environment）的引用共同构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在JavaScript，函数在每次创建时生成闭包。匿名函数和闭包可以放在一起学习，可以加深理解。本文主要通过一些简单的小例子，简述匿名函数和闭包的常见用法，仅供学习分享使用，如有不足之处，还请指正。
普通函数
普通函数由fucntion关键字，函数名，() 和一对{} 组成，如下所示：
1 function box(){ 2 return 'Hex'; 3 } 4 alert(box());
匿名函数
顾名思义，匿名函数就是没有实际名字的函数。单独的匿名函数无法运行，如下所示：
1 function (){ 2 return 'Hex'; 3 } 4 //以上，会报错：缺少标识符
如何解决匿名函数不能执行的问题呢？有如下几种方法：
1. 把匿名函数赋值给变量，如下所示：
1 //把匿名函数赋值给变量 2 var box=function(){ 3 return 'Hex'; 4 } 5 alert(box());
2. 通过自我执行来调用函数，格式如下：(匿名函数)()
1 (function(){ 2 alert('Hex'); 3 })();
3. 把匿名函数自我执行的返回值赋值给变量，如下所示：
1 var box=(function(){ 2 return 'Hex'; 3 })(); 4 alert(box);//注意：此处不带括弧
4. 或者省去变量，如下所示：
1 alert((function() { 2 return 'Hex'; 3 })());
自我执行匿名函数如何传递参数呢？如下所示：
1 (function(age) { 2 alert('Hex--' + age); 3 })(30);
闭包（closure）
闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。简单理解：函数里面套函数，子函数可以访问父函数的作用域里面的变量。
1. 函数里面放匿名函数，如下所示：
1 function box(){ 2 //闭包 3 return function(){ 4 return 'Hex'; 5 } 6 } 7 alert(box()()); 8 //或者 9 var b=box(); 10 alert(b());
2. 通过闭包返回局部变量，使用闭包可以有一个优点，和是它的缺点，可以是局部变量驻留在内存中。
1 function box(){ 2 var age=100;//此变量为函数的局部变量，外部无法访问 3 return function(){ 4 return age; 5 } 6 } 7 alert(box()());
闭包和全局变量相比较
1. 使用全局变量累加，如下所示：
1 var age=100; 2 function box(){ 3 age++; 4 } 5 alert(age); 6 box(); 7 alert(age); 8 box(); 9 alert(age);
2. 使用局部变量累加，如下所示：
1 function box(){ 2 var age=100; 3 age++; 4 return age; 5 } 6 alert(box());//无法实现累加 7 alert(box());//无法实现累加 8 alert(box());//无法实现累加
3. 使用闭包实现累加，如下所示：
1 function box(){ 2 var age=100; 3 return function(){ 4 age++; 5 return age; 6 } 7 } 8 var b=box();//将返回值赋值给b 9 alert(b());//实现累加 10 alert(b());//实现累加 11 alert(b());//实现累加 12 b=null;//使用闭包在调用结束时不会立即销毁内存，导致性能下降,所以需要解除占用
差异：使用全局变量，容易引起命名冲突，且系统性能下降。
循环匿名函数取值问题
1. 循环里的匿名函数取值问题，如下所示：没有实现arr[0]=0,arr[1]=1 ...arr[4]=4的效果
1 function box(){ 2 var arr=[]; 3 for (var i=0;i<5;i++) { 4 arr[i]=function(){ 5 return i; 6 } 7 } 8 //函数返回之前，循环已经结束，i=5 9 return arr; 10 } 11 var b=box(); 12 for (var i=0;i<5;i++) { 13 alert(b[i]()); //此时返回的都是5，没有实现arr[0]=0,arr[1]=1 ...arr[4]=4的效果 14 }
以上问题如何优化呢？
方法1，直接赋值，不采用闭包，如下所示：
1 function box(){ 2 var arr=[]; 3 for (var i=0;i<5;i++) { 4 arr[i]=i; //直接赋值 5 } 6 //函数返回之前，循环已经结束，i=5 7 return arr; 8 } 9 var b=box(); 10 for (var i=0;i<5;i++) { 11 alert(b[i]); 12 }
方法2，通过匿名函数的自我执行，如下所示：
1 function box(){ 2 var arr=[]; 3 for (var i=0;i<5;i++) { 4 arr[i]=(function(num){ 5 //此处可以有其他一些逻辑 6 return num; 7 })(i); 8 } 9 return arr; 10 } 11 var b=box(); 12 for (var i=0;i<5;i++) { 13 alert(b[i]); 14 }
方法3，将变量驻留在内存中，如下所示：
1 function box(){ 2 var arr=[]; 3 for (var i=0;i<5;i++) { 4 arr[i]=(function(num){ 5 //此处可以有其他一些逻辑 6 return function(){ 7 return num; 8 }; 9 })(i); 10 } 11 return arr; 12 } 13 var b=box(); 14 for (var i=0;i<5;i++) { 15 alert(b[i]()); 16 }
关于this的指向问题
对于对象内部，this指向对象本身，如下所示：
1 var box={ 2 getThis:function(){ 3 return this; 4 } 5 }; 6 alert(box.getThis());//输出[object Object] //此处this指box对象
1 var user='The window'; 2 var box={ 3 user:'The box', 4 getUser:function(){ 5 return this.user; 6 } 7 } 8 alert(box.getUser());//输出：the box
this在闭包中，指示window对象，所以闭包在运行时指向window，如下所示：
1 var box1 ={ 2 getThis:function(){ 3 return function(){ 4 return this; 5 } 6 } 7 }; 8 alert(box1.getThis()()); //输出[object Window]//此处this是window对象
1 var box1={ 2 user:'The box', 3 getUser:function(){ 4 //此处的作用域是box1 5 return function(){ 6 //此处的作用域是widow 7 return this.user; 8 }; 9 } 10 } 11 alert(box1.getUser()());//输出：the window ，表示闭包在运行时模拟this指向window
如何让闭包的this指向box呢？可以有如下两种方法，如下所示：
1 alert(box1.getUser().call(box1));//对象冒充 2 //可以将box的作用域对象传递给闭包 3 var box1={ 4 user:'The box', 5 getUser:function(){ 6 var that=this; 7 return function(){ 8 return that.user; 9 }; 10 } 11 } 12 alert(box1.getUser()());
缺点：闭包无法释放对象，容易导致内存泄漏，如下所示：
1 function box(){ 2 var a1=document.getElementById('A01'); 3 var txt=a1.innerHTML; 4 a1.onclick=function(){ 5 //如果a1为null，则会报错 6 //alert(a1.innerHTML);//点击事件获取内容, 7 alert(txt); 8 } 9 //如无下面一句，则会导致内存无法释放对象a1 10 a1=null;//此处需要手动将a1释放，等待回收 11 } 12 box();
块级作用域
模仿块级作用域，面向对象的思想，封装变量。普通函数没有块级作用域的概念，如下所示：
1 function box(){ 2 for (var i=0;i<5;i++) { 3 4 } 5 alert(i);//输出：5，表示出了for语句块，i依然可以访问 6 } 7 box();
如何让i私有化，出了作用域，不可以访问呢?可以采用匿名函数的自我执行，则出了作用域就会访问不到，如下所示：
1 function box(){ 2 (function(){ 3 for (var i=0;i<5;i++) { 4 5 } 6 })(); 7 //alert(i);//报错：提示“i”未定义 8 } 9 box();
全局变量的私有作用域，减少变量的命名冲突，如下所示：
1 (function(){ 2 //此处就是全局作用域里面的私有作用域 3 var age=100; 4 alert(age); 5 })(); 6 //alert(age);////报错：提示“age”未定义
普通函数和构造函数的区别：首字母大写。如下所示：对象的属性和函数都是public类型的
1 function Box(){ 2 this.age=100; //此处是公有属性，无法私有化 3 //函数也是公有函数 4 this.run=function(){ 5 return 'running....'; 6 } 7 } 8 var box=new Box(); 9 alert(box.age); //通过对象可以访问 10 alert(box.run());//通过对象可以访问
如何将公有属性，私有化呢? 如下所示：
1 function Box(){ 2 var age=100;//私有变量，外部访问不到 3 function run(){//私有函数，外部访问不到 4 return 'running....'; 5 } 6 //对外公布的访问接口，可以访问私有内容 7 this.go=function(){ 8 return age+' '+run(); 9 } 10 } 11 var box=new Box(); 12 alert(box.go());
通过构造函数传递参数，如下所示：
1 function Box(v){ 2 var user=v; 3 this.getUser=function(){ 4 return user; 5 }; 6 this.setUser=function(v){ 7 user=v; 8 } 9 } 10 var box=new Box('Hex'); 11 alert(box.getUser()); 12 //对象方法可以在创建的时候，创建多次
注意：通过构造函数创建对象，在每次创建的时候，都会分配不同的地址。
静态私有变量
采用静态私有变量，可以实现数据的共享，如下所示：
1 (function(){ 2 var user=''; //私有变量 3 Box=function(value){//必须全局构造函数，将匿名函数赋值给Box,否则外部无法访问 4 user=value; 5 } 6 Box.prototype.getUser=function(){ 7 return user; 8 }; 9 Box.prototype.setUser=function(value){ 10 user=value; 11 }; 12 })(); 13 var box=new Box('AAAA'); //第一次实例化 14 alert(box.getUser());//输出AAAA 15 var box2=new Box('BBBB');//第二次实例化 16 alert(box.getUser());//输出BBBB
单例对象
单例即只有一个实例化的对象，可以有两种实现方式。
1. 通过字面量的方式实现，如下所示：
1 var box={ 2 user:'hex', 3 go:function(){ 4 return user+' is running....'; 5 } 6 }; 7 alert(box.go());
2. 通过匿名函数的自我执行返回对象的方式实现，如下所示：
1 var box=function(){ 2 var user='Hex'; //私有变量 3 function run(){ //私有函数 4 return ' is running....'; 5 } 6 //返回一个对象 7 var obj= { 8 //公共特权方法 9 going:function(){ 10 return user+run(); 11 } 12 } 13 return obj; 14 }(); 15 alert(box.going());
备注
望岳
岱宗夫如何？齐鲁青未了。
造化钟神秀，阴阳割昏晓。
荡胸生曾云，决眦入归鸟。
会当凌绝顶，一览众山小。
造化钟神秀，阴阳割昏晓。
荡胸生曾云，决眦入归鸟。
会当凌绝顶，一览众山小。