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 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
javascript prototype,executing,context,closure
Dec 24 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
JS回调函数深入理解
2019/10/16 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
人机交互程序 python实现人机对话
2017/11/14 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
python使用Geany编辑器配置方法
2020/02/21 Python
numba提升python运行速度的实例方法
2021/01/25 Python
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
化学相关工作求职信
2013/10/02 职场文书
职业规划实施方案
2014/06/10 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
谢师宴学生致辞
2015/07/27 职场文书
2016春节放假通知范文
2015/08/18 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python