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 EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
vue+webpack中配置ESLint
Nov 07 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
深入理解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 数学运算验证码实现代码
2009/10/11 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
php单一接口的实现方法
2015/06/20 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
js 处理URL实用技巧
2010/11/23 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Python requests模块实例用法
2019/02/11 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
和睦家庭事迹
2014/05/14 职场文书
青奥会口号
2014/06/12 职场文书
法学专业求职信
2014/07/15 职场文书
临时租车协议范本
2014/09/23 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
老公婚前保证书
2015/02/28 职场文书
小学感恩主题班会
2015/08/12 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书