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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
原生js实现购物车功能
Sep 23 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
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设置页面超时时间解决方法
2015/09/22 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
小程序自定义日历效果
2018/12/29 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
师范应届生语文教师求职信
2013/10/29 职场文书
护理学中专毕业生求职信
2013/11/11 职场文书
村创先争优活动总结
2014/08/28 职场文书
外国人来华邀请函
2015/01/31 职场文书
教师个人年终总结
2015/02/11 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
浅谈redis整数集为什么不能降级
2021/07/25 Redis
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers
Python创建SQL数据库流程逐步讲解
2022/09/23 Python