详谈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管中窥豹 形参与实参浅析
Dec 17 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
JS原生实现轮播图的几种方法
Mar 23 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中抽象类和接口的概念以及区别
2013/06/27 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
python小技巧之批量抓取美女图片
2014/06/06 Python
Python list操作用法总结
2015/11/10 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Python2与Python3的区别实例总结
2019/04/17 Python
django最快程序开发流程详解
2019/07/19 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
详解Python中的Lock和Rlock
2021/01/26 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
初中同学聚会邀请函
2014/02/03 职场文书
责任心演讲稿
2014/05/14 职场文书
企业宗旨标语
2014/06/10 职场文书
土建施工员岗位职责
2015/04/11 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书