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 相关文章推荐
IE与FireFox中的childNodes区别
Oct 20 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
javascript的函数作用域
Nov 12 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
node跨域请求方法小结
Aug 25 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 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/10/09 PHP
自己动手做一个SQL解释器
2006/10/09 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
ES6 十大特性简介
2020/12/09 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
python获取栅格点和面值的实现
2020/03/10 Python
重构Python代码的六个实例
2020/11/25 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
决心书标准格式
2014/03/11 职场文书
建党伟业的观后感
2015/06/01 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python