javascript 闭包详解及简单实例应用


Posted in Javascript onDecember 31, 2016

JS 闭包详解及实例:

最近学习JS的基础知识,学习了闭包的知识点,有很多疑惑,这一段时间还是一直有在看闭包的相关知识理解就更深入了一点,下面说说我的理解。

function fn(){
  var a = 0;
  return function (){
    return ++a;
  }  
 }

如上所示,上面第一个return返回的就是一个闭包,那么本质上说闭包就是一个函数。那么返回这个函数有什么用呢?

那是因为这个函数可以调用到它外部的a这个变量。其实也就是说,return返回的是这个函数 + a这个变量

那么,我们现在再来利用这个闭包做点事情

我们不妨创建一个变量 var f = fn(); 我们如果 console.log(f) 一下就知道,这个f就是return的整个函数体,也就是  function () { return ++a;}

那么我们执行f()就相当于执行function函数了,这时,我们多次执行f()的话,返回的a数值就会一直叠加。

但是如果我们现在再创建一个变量 var f2 = fn(); 我们运行f2()的话,会发现,a的值重置了。又会从0开始了。这是为什么呢?

其实我们可以这样理解,首先闭包是一个匿名函数,现在我们将它赋予了一个变量,那么他就有名字了,那么他每次执行完以后就有地方存了。但是每个变量存的地方又不一样,他们相互不关联,所以他们就是独立的个体了,所以a得值就不同了。就当是执行了不同的函数,只是恰好函数体是一样的罢了。

那么,我们闭包的应用场景有什么呢。本来之前我也一直在想,因为我很水,所以我写代码用到闭包的地方并不是很多。但是今天在看前端的设计模式的时候看到了单例模式,想了下,这不就是闭包的一个很好的应用场景么?

比如说我现在的需求是这样的,在网页中有时候会需要遮罩层,调用的时候我就创建一个,但是你不可能每次调用创建吧,所以如果存在就用以前的,如果不存在就创建新的,但同时有可能我永远都不需要这个遮罩层,所以我也有可能一直都不需要创建。

这就是一个很典型的单例模式的场景。

那么我们怎么来实现呢。

function fn() {
  var a;
  return function() {
     return a || (a = document.body.appendChild(document.createElement('div')));
  }
 };
 var f = fn();
f();

就很简单,就是之前的代码稍微改动下就可以了。相关理解也在上面说的很清楚啦,可以仔细看看应该是能明白的。

好了,现在对闭包算是有了一点点深入的理解了。接下来还是要继续慢慢的深入,博主也会及时更新的。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js 为label标签和div标签赋值的方法
Aug 08 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
JS正则表达式封装与使用操作示例
May 15 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
深入理解Angularjs中的$resource服务
Dec 31 #Javascript
BootStrap Fileinput的使用教程
Dec 30 #Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 #Javascript
bootstrapValidator表单验证插件学习
Dec 30 #Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 #Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 #Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 #Javascript
You might like
PHP include_path设置技巧分享
2011/07/03 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
canvas时钟效果
2017/02/16 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
优秀团干部个人事迹
2014/05/29 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
python文件目录操作之os模块
2021/05/08 Python
Python中json.dumps()函数的使用解析
2021/05/17 Python
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS