深入浅出理解JavaScript闭包的功能与用法


Posted in Javascript onAugust 01, 2018

本文实例讲述了JavaScript闭包的功能与用法。分享给大家供大家参考,具体如下:

理解闭包关键是理解JS的对象的本质以及垃圾收集机制。函数也是对象,也有属性,通常执行一个函数时,局部变量在函数执行完后,内存会被回收,这是JS的垃圾收集机制决定的,如果想保存局部变量所占用的内存,就必须把保存在另一个不被回收的变量中,通常是全局变量。函数在创建时,内部属性[[Scope]]保存了作用域链,作用域链中包含外部函数以及全局对象的变量,被称为变量对象。所以把内部函数返回时,由于把函数保存了,所以内部属性[[Scope]]所保存的变量对象也就保存了而没有被回收,因此局部变量也就被保存了。

最简单的闭包:

function f1() {
 var i = 0;
 return function () {
 var j = 0;
 i++;
 console.log(i,j);
 };
}
var fn = f1();
fn();//1 0
fn();//2 0

还有诸如给元素添加事件,事件函数保存着外部函数的变量,通过这个特性可以让按钮显示被点击次数。

当然可以创建多层闭包,最内部函数保存所有外部函数以及全局对象的变量,但并不是任何地方都用闭包,因为其始终都带有[[Scope]]属性,所有比较占内存,所以在需要的时候才用。

闭包在模块化编程,为函数或对象创建私有变量的时候非常有用,可以避免全局污染以及变量命名冲突的问题。

值得注意的是因为[[Scope]]与函数有关,如上述例子,在两次执行f1函数把返回的函数保存在不同的变量中,其外部函数的变量是互不影响的。如:

function f1() {
 var i = 0;
 return function () {
 var j = 0;
 i++;
 console.log(i,j);
 };
}
var fn = f1();
fn();//1 0
fn();//2 0
var fn1 = f1();
fn1();//1 0
fn(); //3 0
fn1();//2 0

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试一下上述代码的运行效果,以加深对javascript闭包的认识。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript常用函数技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
node.js基础知识汇总
Aug 25 Javascript
Angular路由ui-router配置详解
Aug 01 #Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 #Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 #Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 #Javascript
create-react-app 修改为多入口编译的方法
Aug 01 #Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 #Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 #Javascript
You might like
关于IIS php调用com组件的权限问题
2012/01/11 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
js下弹出窗口的变通
2007/04/18 Javascript
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
Js四则运算函数代码
2012/07/21 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
javascript每日必学之继承
2016/02/23 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
python sort、sorted高级排序技巧
2014/11/21 Python
python定时执行指定函数的方法
2015/05/27 Python
python去掉空白行的多种实现代码
2018/03/19 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
JAVA和C++区别都有哪些
2015/03/30 面试题
DBA的职责都有哪些
2012/05/16 面试题
创业计划书的主要内容有哪些
2014/01/29 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
财政局长个人总结
2015/03/04 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python