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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
js word表格动态添加代码
Jun 07 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 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
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php查询操作实现投票功能
2016/05/09 PHP
深入分析PHP设计模式
2020/06/15 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
django 自定义过滤器的实现
2019/02/26 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
企业车辆管理制度
2014/01/24 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
服务承诺口号
2014/05/22 职场文书
贷款工资证明范本
2015/06/12 职场文书
文艺节目主持词
2015/07/06 职场文书
React配置子路由的实现
2021/06/03 Javascript
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏