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 相关文章推荐
jQuery DOM操作小结与实例
Jan 07 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
Vue中computed与methods的区别详解
Mar 24 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 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图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
关于php中一些字符串总结
2016/05/05 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
javascript 数组排序函数
2009/08/20 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
Python中的延迟绑定原理详解
2019/10/11 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
机关搬迁方案
2014/05/18 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
学校社团活动总结
2015/05/07 职场文书
防溺水主题班会教案
2015/08/12 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS