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 相关文章推荐
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 Javascript
原生js实现九宫格拖拽换位
Jan 26 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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
Python实现的数据结构与算法之队列详解
2015/04/22 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
python redis 删除key脚本的实例
2019/02/19 Python
np.random.seed() 的使用详解
2020/01/14 Python
快速查找Python安装路径方法
2020/02/06 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
传播学毕业生求职信
2013/10/11 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
施工协议书范本
2014/04/22 职场文书
国际金融专业自荐信
2014/07/05 职场文书
雷锋的故事观后感
2015/06/10 职场文书
党员身份证明材料
2015/06/19 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
python神经网络 使用Keras构建RNN训练
2022/05/04 Python
nginx之内存池的实现
2022/06/28 Servers