JavaScript匿名函数和闭包

Posted 天马行空

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript匿名函数和闭包相关的知识,希望对你有一定的参考价值。

概述

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());

备注

望岳

作者:杜甫 (唐)

岱宗夫如何?齐鲁青未了。
造化钟神秀,阴阳割昏晓。
荡胸生曾云,决眦入归鸟。
会当凌绝顶,一览众山小。

以上是关于JavaScript匿名函数和闭包的主要内容,如果未能解决你的问题,请参考以下文章

深入理解javascript 匿名函数和闭包

JavaScript匿名函数和闭包

JavaScript 匿名函数和闭包

JavaScript中的匿名函数立即执行函数和闭包

JavaScript——匿名函数和闭包

深入理解javascript原型和闭包(12)——闭包