javascript中闭包概念与用法深入理解


Posted in Javascript onDecember 15, 2016

本文实例分析了javascript中闭包概念与用法。分享给大家供大家参考,具体如下:

1.问题的引出,什么时候会遇到闭包?

首先因为JS是没有块状作用域的,但是有函数作用域即函数作为了局部变量之间的界限,不同函数内的局部变量具有独立性,

因为JS没有块状作用域,笔者初学JS时,在事件的监听时,因为不理解JS中局部变量的作用域,犯过不少错误!

(1)JS中的变量作用域

for(var i=0;i<9;i++)
{
}
alert(i) //输出9

我们发现,虽然变量i是块状区域for()内的一个局部变量,但是我们在块级作用域for()外,依然可以得到变量i

(2)JS中的函数作用域

function abc(){
 var a=1;
}
abc();
alert(a);// 会报错,a is not defined

我们发现,在函数外调用函数后,在函数外是无法取到函数里的变量

总结:通过(1),(2),我们加深了对JS中,没有块级作用域只有函数作用域的理解!

举例:如果现在例1:

var a=1
function abc(){
 var a=2;
}
abc();
alert(a) // a=1

特别注意如果例2:

var a=1
function abc(){
a=2;
alert(a);
}
abc();//a=2

对比例1,不同之处在于例2,中 是“a=2"而不是”var a=2“

区别在于如果是var a,则表示在函数中定义变量a,如果是没有变量声明,如果直接a,则表示在全局变量中定义变量a;

2.如果引用函数内部的变量?

由1可知,JS中只存在函数作用域,那么我们如何才能在拿到函数中定义的变量呢?

根据JS的语法规则:内部函数(或者内部对象)中,可以访问外部函数中的变量。

什么意思呢?举例说明例1:

function abc(){
 var a=1;
 !function(){
 alert(a)
} ()
} //此时不会报错,a=1

再举一个例子(内部对象的例子)例2:

var o={
 a=1,
 myfun:function(){
 return this.a
}
}

则alert(o.myfun())得到的值为1,现在我们大概了解了如何访问函数(或者对象,其实函数的本身也是对象)中的变量!

3.什么是闭包?

我的理解就定义在一个函数内部的函数!

闭包是函数内部与外部之间的桥梁!

即内部函数在定义它的外部使用时,就创建了一个闭包!

我们知道,一般情况下,当函数被调用完,内存会被释放,但是应用于函数闭包比如

function abc1(){
 var a=1;
function abc2(){
 a++;
}
return abc2()
}

当我们调用abc1()函数后,因为abc1函数的中又调用了abc2()函数,因此函数abc1()中的变量在子函数中被调用,所以在父函数abc1()调用结束后

变量a的内存空间并不会被释放!

为什么GC机制无法回收abc1()函数中的变量a,  因为首先我们在全局中调用了函数abc1(),我们设全局对象为c,abc1()对象为b,同时我们在对象b

即函数abc1()中又调用了函数abc2(),设abc2(0为a。

再次理解这种关系    c中调用了b,b中又调用了a,JS中规定当a,b对象两两互相引用,并且a,b中又有一个被a,b函数之外的对象c引用时,GC机制不执行垃圾回收(变量清空)!

由此我们引出了闭包的重要作用:

如果内部函数在其外部被调用,则会产生闭包,闭包用于保存某些变量的值,不会被垃圾回收机制回收!

4.闭包的缺点

因为使用闭包后,某些变量会在函数调用之后持续的保持在内存中,因此滥用闭包会导致内存泄漏!

5.扩展应用,加深对于闭包的理解!

var o={
 a:1;
myfunc:function(){
return function(){
 return this.a;
}
}
alert(o.myfunc()()); // a is not defined
}

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

Javascript 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
react的hooks的用法详解
Oct 12 Javascript
React实现评论的添加和删除
Oct 20 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 Javascript
javascript读取文本节点方法小结
Dec 15 #Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 #Javascript
jQuery validate插件功能与用法详解
Dec 15 #Javascript
EditPlus 正则表达式 实战(3)
Dec 15 #Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 #Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 #Javascript
js代码实现下拉菜单【推荐】
Dec 15 #Javascript
You might like
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
JS Timing
2007/04/21 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
浅谈五大Python Web框架
2017/03/20 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
网上快餐厅创业计划书
2014/02/01 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
银行委托书范本
2014/04/04 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
2014年工商所工作总结
2014/12/09 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
利用python做表格数据处理
2021/04/13 Python
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android