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页面顶部卷动广告效果
Dec 01 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
Javascript实现秒表计时游戏
May 27 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 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动态变静态原理
2006/11/25 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
Python struct模块解析
2014/06/12 Python
Python实现的几个常用排序算法实例
2014/06/16 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
4s店市场专员岗位职责
2014/04/09 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
寻找成龙观后感
2015/06/12 职场文书