详谈JavaScript的闭包及应用


Posted in Javascript onJanuary 17, 2017

闭包真的是学过一遍又一遍,Js博大精深,每次学习都感觉有新的收获。相信在大家封装前端插件时,闭包是必不可少的。闭包的真正好处我个人认为除了封装还是封装,能带个我们私有方法,和调用上的灵活方便,也会使你的代码对外的对象保持干净整洁。

进入正题

维基百科这样定义了JS闭包:在计算机科学中,闭包(英语:Closure),又称词法闭包(Lexical Closure)或函数闭包(function closures),是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的环境也不例外。所以,有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。闭包在运行时可以有多个实例,不同的引用环境和相同的函数组合可以产生不同的实例。

通俗的讲,闭包不同于一般函数,它允许一个函数在立即此法调用的作用域外,仍可访问非本地变量。我还想说,闭包的语法让你的代码更加动感,下面的一段代码可能会让你有所感触。

<script>
 (function () {
 var userToken = "this is my token";
 var someConfig = "opening some function";
 var privateValue = "private";
 var publicValue = "public";
 var appObj = {};
 function myPrivateFunc() {
 alert(privateValue)
 }
 appObj.getUserToken = function () {
 //some logic
 userToken += " after some inner logic";
 return userToken;
 }
 appObj.publicVal = publicValue;
 window.application = appObj;
 }());//立即执行
 console.log(application.getUserToken());//this is my token after some inner logic
 console.log(application.publicVal);//public
 console.log(application.privateValue); //undefined
 application.myPrivateFunc(); //error
 </script>

我将appObj附加到window下面,我通常喜欢定义一个全局的名为application的对象,代表着整个应用公用的顶级对象,你可以在其中向外暴露很多公共的操作方法,也可以在其中做一些私有的处理,以防外部调用导致某些问题。在所定义的“顶级”application对象下,你也可以将你所非要不可的全局变量定义在其中,这样以防普通全局变量对应用造成的影响,又可以在你定义的闭包内,通过向外暴露的对象表达更明确的信息,我一直认为,随随便便定义一个JS全局变量实在是太可耻了。

闭包的写法加上VS强大的智能提示,你会感觉到无比的畅快。下面我又附加了一个方法

(function () {
 var baseUrl = "www.cnblogs.com/tdws/";

 application.getBaseUrl = function () {
 return baseUrl;
 }
 }());
 console.log(application.getBaseUrl());//www.cnblogs.com/tdws/

详谈JavaScript的闭包及应用

写在最后

你不觉得把变量保留起来,暴露出一系列get方法,很动感吗 ?(?-?)? 摊手......

当然闭包也需要你恰当的使用,不要造成循环引用,因为它将导致内存泄漏。不要做无谓的闭包,造成你空间的浪费,因为闭包不会被释放。不要处处闭包,因为它将增加你代码的复杂性。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
用原生js做单页应用
Jan 17 #Javascript
js cookie实现记住密码功能
Jan 17 #Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 #Javascript
微信小程序 登陆流程详细介绍
Jan 17 #Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 #Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 #Javascript
js处理层级数据结构的方法小结
Jan 17 #Javascript
You might like
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
php文件缓存类汇总
2014/11/21 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
javascript全局变量封装模块实现代码
2012/11/28 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
node.js实现快速截图
2016/08/27 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
浅谈编码,解码,乱码的问题
2016/12/30 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python二进制文件的转译详解
2019/07/03 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
python中的插入排序的简单用法
2021/01/19 Python
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
日语专业个人的求职信
2013/12/03 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
2015年幼师工作总结
2015/04/28 职场文书
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js