js中的闭包学习心得


Posted in Javascript onFebruary 06, 2018

闭包

按中文的意思就是关上一个包的意思。如果我们把函数的作用域当做是一个包的话,那这个词很形象体现了它的作用 。函数的正常的执行流程是当函数中的语句执行完后,程序会自动销毁这个函数的作用域,但是当一个函数中声明了另一个函数,并且这个子函数执行时存在引用父函数的变量,就会形成闭包,形象点说就相当于把父函数的作用域给关闭了起来,不让程序去销毁它。

例如:

function a() {
  var name = "xuxu";
  function b() {
    console.log(name);
  }
  // 此处产生闭包 
  b();
} 
a();

当函数可以记住并访问它所在的作用域链时,就产生了闭包 当然,大部分的闭包都不是这么直观的,因为子函数的调用是可以在父函数之外的,例如:

function a() {
  var name = "xuxu";
  function b() {
    console.log(name);
  }
  return b;
} 
var c=a();
// 此处产生闭包 此处的c函数其实就是a函数
c();

通过以上代码,我们也可以看出一个闭包的好处,就是我们再全局作用域(此处是widow)下访问到了局部作用域(a函数)的作用域的值,按正常的词法作用域是无法这么做的,但是当我们使用闭包是就可以了。然后我们再看一点我们平时写的比较多的:

function foo() {
  var a = 2;
  function baz() {
     // 2
    console.log( a ); 
  }
  bar( baz );
}
function bar(fn) {
// 大家快看呀,这就是闭包!
  fn(); 
}

又或者

var fn;
function foo() {
  var a = 2;
  function baz() {
    console.log( a );
  }
  // 将baz分配给全局变量
  fn = baz; 
}
function bar() {
   // 大家快看呀,这就是闭包!
  fn();
}
foo();
// 2
bar();

以上也是闭包,因此在函数内部调用子函数,或者通过何种手段将内部函数传递到所在的词法作用域以外,它都会持有对原始定义作用域的引用,无论在何处执行这个函数都会使用闭包。

Javascript 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
js 匿名调用实现代码
Jun 19 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 #Javascript
Vue仿今日头条实例详解
Feb 06 #Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 #Javascript
详解React开发必不可少的eslint配置
Feb 05 #Javascript
详解js的作用域、预解析机制
Feb 05 #Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 #Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 #jQuery
You might like
PHP调用三种数据库的方法(2)
2006/10/09 PHP
php 进度条实现代码
2009/03/10 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
解析php入库和出库
2013/06/25 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
php绘制一个矩形的方法
2015/01/24 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
js中onload与onunload的使用示例
2013/08/25 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
Vue3为什么这么快
2020/09/23 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
Python爬虫设置代理IP(图文)
2018/12/23 Python
利用nohup来开启python文件的方法
2019/01/14 Python
利用python在excel中画图的实现方法
2020/03/17 Python
pandas分批读取大数据集教程
2020/06/06 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
阿德的梦教学反思
2014/02/06 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
目标责任书范文
2014/04/14 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL