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 相关文章推荐
jQuery 处理网页内容的实现代码
Feb 15 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
详细聊聊vue中组件的props属性
Nov 02 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
WINXP下apache+php4+mysql
2006/11/25 PHP
php巧获服务器端信息
2006/12/06 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
Python常用的爬虫技巧总结
2016/03/28 Python
Python的argparse库使用详解
2018/10/09 Python
设置python3为默认python的方法
2018/10/31 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
python 安装移动复制第三方库操作
2020/07/13 Python
一套SQL笔试题
2016/08/14 面试题
元旦联欢会感言
2014/03/04 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
《老山界》教学反思
2014/04/08 职场文书
工作保证书范文
2014/04/29 职场文书
质量负责人任命书
2014/06/06 职场文书
电子工程求职信
2014/07/17 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
工程索赔意向书
2014/08/30 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
python实现高效的遗传算法
2021/04/07 Python