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 相关文章推荐
复选框全选与全不选操作实现思路
Aug 18 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
php 小乘法表实现代码
2009/07/16 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
python实现简单加密解密机制
2019/03/19 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
生日邀请函范文
2014/01/13 职场文书
办公室主任先进事迹
2014/01/18 职场文书
小加工厂管理制度
2014/01/21 职场文书
老公爱的承诺书
2014/03/31 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
基于JavaScript实现省市联动效果
2021/06/22 Javascript
MySQL 如何限制一张表的记录数
2021/09/14 MySQL