详谈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 变量命名规则
Sep 23 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
JS判断数组四种实现方法详解
Jun 29 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 静态变量的初始化
2009/11/15 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
Python入门教程之运算符与控制流
2016/08/17 Python
Python时间获取及转换知识汇总
2017/01/11 Python
Python中Threading用法详解
2017/12/27 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
CSS3 边框效果
2019/11/04 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
销售高级职员求职信
2013/10/29 职场文书
yy司仪主持词
2014/03/22 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL