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之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
jQuery.each使用详解
Jul 07 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
JavaScript async/await原理及实例解析
Dec 02 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 文件上传类代码
2011/08/06 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
详解php协程知识点
2018/09/21 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
Vue渲染函数详解
2017/09/15 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
python+Django+apache的配置方法详解
2016/06/01 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
传播学毕业生求职信
2013/10/11 职场文书
考博自荐信
2013/10/25 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
元旦联欢会主持词
2014/03/26 职场文书
大学生励志演讲稿
2014/04/25 职场文书
法人单位授权委托书范文
2014/10/06 职场文书