详谈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 相关文章推荐
popdiv
Jul 14 Javascript
jQuery 使用手册(五)
Sep 23 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
用原生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实现过滤字符串中的中文和数字实例
2015/07/29 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
Javascript学习笔记2 函数
2010/01/11 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
python中cPickle类使用方法详解
2018/08/27 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
应聘美工求职信
2013/11/07 职场文书
如何掌握自荐信格式呢
2013/11/19 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
高中生操行评语
2014/04/25 职场文书
实习生评语
2014/04/26 职场文书
尊师重教演讲稿
2014/09/04 职场文书
博士生专家推荐信
2015/03/25 职场文书
2019年大学推荐信
2019/06/24 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers
MySQL 原理与优化之Update 优化
2022/08/14 MySQL