详谈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 相关文章推荐
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
用原生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
1 Tube Radio
2021/03/02 无线电
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
利用json获取字符出现次数的代码
2012/03/22 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
jquery自定义表格样式
2015/11/23 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
Python数据类型详解(四)字典:dict
2016/05/12 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
毕业生文员求职信
2013/11/03 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2014年团队工作总结
2014/11/24 职场文书
销售2014年度工作总结
2014/12/08 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
解除合同协议书范本
2016/03/21 职场文书