Javascript笔记 – Javascript中的闭包
本文由发表于5年前 | Javascript | 暂无评论 |  被围观 3,366 views+
Javascript中的闭包:1、闭包的特性:2、闭包的作用:2.1、使用匿名函数自动执行,减少全局对象属性2.2、使用闭包创建缓存:2.3、使用闭包实现封装:3、使用闭包需要注意的问题:3.1、内存泄露:3.2、上下文的引用:
Javascript中的闭包:

由于Javascript中的函数是对象,对象的属性是集合,而属性的值又可以是对象,所以可以再函数内定义一个函数。如果在函数内部声明函数,然后在函数的外部调用,这个过程就产生了一个闭包。

1、闭包的特性:

下面来看一个例子说明闭包的特性:

var outter = [];
function processor(){
    for(var i=0; i<4; i++){
        var temp = {};
        temp.id = i;
        temp.invoke = function(){
            alert(i);
        };
        outter.push(temp);
    }
}
processor();  //执行到这里并不会输出
outter[0].invoke();  //输出4
outter[1].invoke();  //输出4
outter[2].invoke();  //输出4
outter[3].invoke();  //输出4

在每次循环的时候,temp.invoke并不会被执行,只是在这里构造了一个函数而已,循环退出时,再用外部的数组outter的元素去访问invoke函数,这是,i已经是4了,所以所有的函数调用都输出为4。

为了在循环中可以执行invoke函数,可以在里面声明一个匿名函数并立刻执行它:

var outter = [];
function processor(){
    for(var i=0; i<4; i++){
        var temp = {};
        temp.id = i;
        temp.invoke = function(no){
            return function(){
                alert(no);
            }
        }(i);
        outter.push(temp);
    }
}
processor();  //依次输出0,1,2,3
可以看出,闭包允许你引用存在于外部函数中的变量,但是,并不是引用该变量创建时的值,而是使用该外部函数中该外部变量最后的值。
2、闭包的作用:
2.1、使用匿名函数自动执行,减少全局对象属性

如果变量不加上var就会默认成为全局变量,即添加到全局对象的属性上去。如果别的函数误用了这些变量,造成全局对象过于庞大,影响了访问速度(从原型链上遍历获取变量的时间开销增加)。所以,爱实际情况中,如果有些函数只需要执行一次,如一些初始化函数,那么我们可以使用闭包让他自动执行,由于外部无法引用它内部的变量,所以在执行完后很快就会被释放,从而不会影响到全局变量:

var target = {
    image :["01","02","03"]
}
var screenBg = [];
//使用target初始化screenBg的函数
(function(tg){
    for(var i=0; i<tg.image.length; i++){
        screenBg[i] = tg.image[i];
    }
})(target);

alert(screenBg.join(","));
2.2、使用闭包创建缓存:
2.3、使用闭包实现封装:

下面是使用闭包特性的一个封装例子:

var user = function(){
    var name = "default";  //局部变量外部无法访问
    return{
        setName : function(username){
            name = username
        },
        getName : function(){
            return name;
        }
    }
}();
alert(user.name);  //无法直接访问,输出为undefined
alert(user.getName());  //输出为default

使用闭包,可以模拟实现面向对象中的对象。下面就改造上面的例子,实现一个类:

var User = function(){
    var name = "default";  //局部变量外部无法访问
    return{
        setName : function(username){
            name = username
        },
        getName : function(){
            return name;
        }
    }
};
//创建一个User对象
var user1 = new User();
user1.setName("arthinking");
alert(user1.name);  //无法直接访问,输出为undefined
alert(user1.getName());  //输出为arthinking

在函数式编程中,会大量用到闭包。

3、使用闭包需要注意的问题:
3.1、内存泄露:

类似于Java,Javascript中的解释器提供了垃圾回收机制,一般是通过引用计数的形式。在闭包中,有些局部变量可能在将来的某些时刻要被使用,所以来及回收器不会处理这些被外部引用的局部变量。如果出现了引用循环,即,对象A引用了对象B,B引用了C,C又引用了A,这样引用计数就不会为0了,从而造成了内存泄露。

3.2、上下文的引用:

Javascript中的this指针表示的是调用对象的引用。在闭包中比较容易误用this指针。下面就举个例子:

$(function(){  
    var con = $("#panel");  
    this.id = "content";  
    con.click(function(){  
       alert(this.id);//panel 
    });  
});

这里click中的函数this.id由于该函数是在click事件中的,所以this表示的是触发该click事件的组件,所以不会输出上面定义的id,而是输出该组件的id,如果想要在这个函数中输入上面的id可以这样处理:

$(function(){  
    var con = $("#panel");  
 this.id = "content";  
 var self = this;
    con.click(function(){  
       alert(self.id);//content
    });  
});
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/javascript-notes-javascript-closures.html
关键字: ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2012 5/31
文章评论
    没有评论
给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 Java聊天软件 | Project 2011/11/14
2 Java动态代理之JDK动态代理和CGLib动态代理 面向切面编程AOP原理 2014/4/1
3 Hibernate的框架结构及其工作流程 2011/5/27
4 HTTP协议学习 – HTTP HTTP协议介绍 持续连接 HTTP消息 2011/11/6
5 Java中内存泄露的分析 2014/11/10
6 Android的广播机制实现 BroadcastReceiver 2011/7/12
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.