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 相关文章推荐
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
Apr 23 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
Node.js操作系统OS模块用法分析
Jan 04 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
javascript实现点击小图显示大图
Nov 29 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
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 flock 文件锁详细介绍
2012/12/29 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
对angular4子路由&辅助路由详解
2018/10/09 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
用python实现对比两张图片的不同
2018/02/05 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
计算机开发个人求职信范文
2013/09/26 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
户外拓展活动方案
2014/02/11 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
机械机修工岗位职责
2014/08/03 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
总经理年会致辞
2015/07/29 职场文书
大学生支教感言
2015/08/01 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
MySQL分库分表详情
2021/09/25 MySQL