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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
基于Angularjs实现分页功能
May 30 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
layui实现三级导航菜单
Jul 26 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 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
最省空间的计数器
2006/10/09 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
python区块及区块链的开发详解
2019/07/03 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
建筑工地宣传标语
2014/06/18 职场文书
归元寺导游词
2015/02/06 职场文书
大学毕业生个人总结
2015/02/28 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python