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 相关文章推荐
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
使用Vue实现简单计算器
Feb 25 Javascript
微信小程序实现时间戳格式转换
Jul 20 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
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&mysql(六)
2006/10/09 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
2019/10/31 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
使用pycharm生成代码模板的实例
2018/05/23 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
python自动生成证件号的方法示例
2021/01/14 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
教师节倡议书2015
2015/04/27 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
运动会200米广播稿
2015/08/19 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫
nginx静态资源的服务器配置方法
2022/07/07 Servers