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 相关文章推荐
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
js 调用百度分享功能
Feb 27 Javascript
seajs下require书写约定实例分析
May 16 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 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
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
vue登录注册实例详解
2019/09/14 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
python通过函数属性实现全局变量的方法
2015/05/16 Python
python图像处理之反色实现方法
2015/05/30 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
python实现网页自动签到功能
2019/01/21 Python
Python递归函数实例讲解
2019/02/27 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
python代码实现猜拳小游戏
2020/11/30 Python
浅谈HTML5 & CSS3的新交互特性
2016/07/19 HTML / CSS
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
致跳高运动员广播稿
2014/01/13 职场文书
部队个人年终总结
2015/03/02 职场文书
消防安全月活动总结
2015/05/08 职场文书
校友会致辞
2015/07/30 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书