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 相关文章推荐
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 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设计模式 Mediator (中介者模式)
2011/06/26 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
有关环保的标语
2014/06/13 职场文书
文明城市标语
2014/06/16 职场文书
商铺门面租房协议书
2014/10/21 职场文书
2014年党建工作总结
2014/11/11 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
总结几个非常实用的Python库
2021/06/26 Python
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技