js闭包的用途详解


Posted in Javascript onNovember 09, 2014

我们来看看闭包的用途。事实上,通过使用闭包,我们可以做很多事情。比如模拟面向对象的代码风格;更优雅,更简洁的表达出代码;在某些方面提升代码的执行效率。

1 匿名自执行函数

我们知道所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去,这样的临时变量加入全局对象有很多坏处,
比如:别的函数可能误用这些变量;造成全局对象过于庞大,影响访问速度(因为变量的取值是需要从原型链上遍历的)。
除了每次使用变量都是用var关键字外,我们在实际情况下经常遇到这样一种情况,即有的函数只需要执行一次,其内部变量无需维护,
比如UI的初始化,那么我们可以使用闭包:

var datamodel = {    

    table : [],    

    tree : {}    

};    

     

(function(dm){    

    for(var i = 0; i < dm.table.rows; i++){    

       var row = dm.table.rows[i];    

       for(var j = 0; j < row.cells; i++){    

           drawCell(i, j);    

       }    

    }    

       

    //build dm.tree      

})(datamodel);  

我们创建了一个匿名的函数,并立即执行它,由于外部无法引用它内部的变量,
因此在执行完后很快就会被释放,关键是这种机制不会污染全局对象。

2缓存

再来看一个例子,设想我们有一个处理过程很耗时的函数对象,每次调用都会花费很长时间,
那么我们就需要将计算出来的值存储起来,当调用这个函数的时候,首先在缓存中查找,如果找不到,则进行计算,
然后更新缓存并返回值,如果找到了,直接返回查找到的值即可。闭包正是可以做到这一点,因为它不会释放外部的引用,
从而函数内部的值可以得以保留。

var CachedSearchBox = (function(){    

    var cache = {},    

       count = [];    

    return {    

       attachSearchBox : function(dsid){    

           if(dsid in cache){//如果结果在缓存中    

              return cache[dsid];//直接返回缓存中的对象    

           }    

           var fsb = new uikit.webctrl.SearchBox(dsid);//新建    

           cache[dsid] = fsb;//更新缓存    

           if(count.length > 100){//保正缓存的大小<=100    

              delete cache[count.shift()];    

           }    

           return fsb;          

       },    

     

       clearSearchBox : function(dsid){    

           if(dsid in cache){    

              cache[dsid].clearSelection();      

           }    

       }    

    };    

})();    

     

CachedSearchBox.attachSearchBox("input1");   

这样,当我们第二次调用CachedSearchBox.attachSerachBox(“input1”)的时候,
我们就可以从缓存中取道该对象,而不用再去创建一个新的searchbox对象。

3 实现封装

可以先来看一个关于封装的例子,在person之外的地方无法访问其内部的变量,而通过提供闭包的形式来访问:

var person = function(){    

    //变量作用域为函数内部,外部无法访问    

    var name = "default";       

       

    return {    

       getName : function(){    

           return name;    

       },    

       setName : function(newName){    

           name = newName;    

       }    

    }    

}();    

     

print(person.name);//直接访问,结果为undefined    

print(person.getName());    

person.setName("abruzzi");    

print(person.getName());   

得到结果如下: 
  
undefined 
default 
abruzzi 
 
4 闭包的另一个重要用途是实现面向对象中的对象,传统的对象语言都提供类的模板机制,
这样不同的对象(类的实例)拥有独立的成员及状态,互不干涉。虽然JavaScript中没有类这样的机制,但是通过使用闭包,
我们可以模拟出这样的机制。还是以上边的例子来讲:

function Person(){    

    var name = "default";       

       

    return {    

       getName : function(){    

           return name;    

       },    

       setName : function(newName){    

           name = newName;    

       }    

    }    

};    

     

     

var john = Person();    

print(john.getName());    

john.setName("john");    

print(john.getName());    

     

var jack = Person();    

print(jack.getName());    

jack.setName("jack");    

print(jack.getName());   

运行结果如下: 
  
default 
john 
default 
jack 
由此代码可知,john和jack都可以称为是Person这个类的实例,因为这两个实例对name这个成员的访问是独立的,互不影响的。

以上便是js闭包的作用了,非常简单易懂吧,希望对小伙伴们有所帮助

Javascript 相关文章推荐
jQuery编写widget的一些技巧分享
Oct 28 Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
js闭包实例汇总
Nov 09 #Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 #Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 #Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 #Javascript
js 操作符汇总
Nov 08 #Javascript
jquery的总体架构分析及实现示例详解
Nov 08 #Javascript
jquery常用方法及使用示例汇总
Nov 08 #Javascript
You might like
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
PHP中动态显示签名和ip原理
2007/03/28 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Python中一些深不见底的“坑”
2019/06/12 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python递归法解决棋盘分割问题
2019/07/17 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
致100米运动员广播稿
2014/02/14 职场文书
家长对学生的评语
2014/04/18 职场文书
求职信结尾怎么写
2014/05/26 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
赢在中国观后感
2015/06/02 职场文书
中秋节随笔
2015/08/15 职场文书
Python 统计序列中元素的出现频度
2022/04/26 Python