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中的有名函数和无名函数
Oct 17 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
jquery 图片轮换效果
Jul 29 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
学习jQuey中的return false
Dec 18 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
js实现简单抽奖功能
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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
脚本合并提升javascript性能示例
2014/02/24 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
Numpy之文件存取的示例代码
2018/08/03 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
国际经济与贸易专业求职信
2014/07/10 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
党员自我剖析材料
2014/08/31 职场文书
教书育人演讲稿
2014/09/11 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript