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同时按下两个方向键
Dec 01 Javascript
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
深入理解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
服务器端解压缩zip的脚本
2006/12/22 PHP
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
Python中pillow知识点学习
2018/04/30 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
html5 视频播放解决方案
2016/11/06 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
日语专业毕业生求职信
2013/12/04 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
践行三严三实心得体会
2014/10/13 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
高中家长意见怎么写
2015/06/03 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android