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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
js的2种继承方式详解
Mar 04 Javascript
javascript闭包入门示例
Apr 30 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
如何实现js拖拽效果及原理解析
May 08 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
php批量删除数据
2007/01/18 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
Django REST framework内置路由用法
2019/07/26 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
小学生家长评语集锦
2014/01/30 职场文书
小学生家长评语大全
2014/02/10 职场文书
工程承包协议书
2014/04/22 职场文书
单独二胎证明
2015/06/24 职场文书
养成教育工作总结
2015/08/13 职场文书