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中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
javascript cookie的简单应用
Feb 24 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
JavaScript实现网页跨年倒计时
Dec 02 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
ant design charts 获取后端接口数据展示
May 25 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
python循环监控远程端口的方法
2015/03/14 Python
python内存管理分析
2015/04/08 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
pandas 数据类型转换的实现
2020/12/29 Python
Python绘制数码晶体管日期
2021/02/19 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
金融专业应届生求职信
2013/11/02 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang
JavaScript的function函数详细介绍
2021/11/20 Javascript