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添加String.Format方法
Aug 11 Javascript
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
javascript数组去掉重复
May 12 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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 分页原理分析,大家可以看看
2009/12/21 PHP
php数组键值用法实例分析
2015/02/27 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
js left,right,mid函数
2008/06/10 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
Python创建模块及模块导入的方法
2015/05/27 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
Python调用C语言的实现
2019/07/26 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
python实现图像外边界跟踪操作
2020/07/13 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
护士辞职信模板
2014/01/20 职场文书
个人自我评价范文
2014/02/05 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js