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实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
javascript基础知识
Jun 07 Javascript
完美的js图片轮换效果
Feb 05 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
解决vue项目router切换太慢问题
Jul 19 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
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
使用纯javascript实现放大镜效果
2015/03/18 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
浅谈Python peewee 使用经验
2017/10/20 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
个人找工作的自我评价
2013/10/17 职场文书
连锁超市项目计划书
2014/09/15 职场文书
房屋维修协议书范本
2014/09/25 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
贫困证明怎么写
2015/06/16 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
python执行js代码的方法
2021/05/13 Python