深入浅出理解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 相关文章推荐
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
Javascript 日期处理之时区问题
Oct 08 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
微信小程序实现底部导航
Nov 05 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
php时间戳转换的示例
2014/03/31 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
laravel请求参数校验方法
2019/10/10 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
JQUERY获取form表单值的代码
2010/07/17 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Python实现LRU算法的2种方法
2015/06/24 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
python中关于数据类型的学习笔记
2020/07/19 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
警校毕业生自我评价
2014/04/06 职场文书
委托公证书
2014/04/08 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
党课主持词大全
2015/06/30 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
小数乘法教学反思
2016/02/22 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
MySQL学习总结-基础架构概述
2021/04/05 MySQL
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python