JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解


Posted in Javascript onMay 31, 2016

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。很早就接触过闭包这个概念了,但是一直糊里糊涂的,没有能够弄明白JavaScript的闭包到底是什么,有什么用,今天在网上看到了一篇讲JavaScript闭包的文章(原文链接),讲得非常好,这下算是彻底明白了JavaScript的闭包到底是个神马东东以及闭包的用途了,在此写出来和大家分享一下,希望不理解JavaScript闭包的朋友们看了之后能够理解闭包!以下内容大部分是来自原文,我在原文的基础上加上一些代码注释和运行效果图以及少许的修改,方便大家理解!

一、变量的作用域

要理解闭包,首先必须理解Javascript特殊的变量作用域。

在JavaScript中,变量的作用域分两种:全局变量和局部变量。

在Javascript中,在函数内部可以直接读取全局变量。

var n=;//定义全局变量n
function f(){
alert("在函数内部访问全局变量n,n="+n);//在函数内部访问全局变量n
}
f(); //

运行结果:

 

JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解

但是反过来则不行,在函数外部无法读取函数内的局部变量。

function f(){
var n=;//在f函数内部定义局部变量n
}
alert("在函数外部访问局部变量n,n="+n); //在函数外部访问局部变量n,错误:n未定义

运行结果:

 JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解

这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,实际上是声明了一个全局变量!

function f(){
n=;
}
f();
alert("n在f1函数内部没有使用var来声明,此时n就是一个全局变量,\r\n证明:n="+n+",window.n==n的结果是:"+(window.n==n));

运行结果:

 JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解

二、如何从外部读取局部变量?

出于种种原因,我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。

那就是在函数的内部,再定义一个函数。

function f(){
var n=;//f函数内部的局部变量n
//在f函数内部定义一个f函数

function f(){
//在f函数内部是可以访问局部变量n的


alert(n); // 

}
}

在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1 就是不可见的。这就是Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!或许有人会有疑问,f2是一个函数啊,怎么能够作为f1函数的返回值返回呢,其实是可以的,JavaScript中的函数名本身就是变量,所以函数也可以当作普通变量来使用。也就是说,不仅可以像传递参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的返回值返回。

function f(){

var n=;//局部变量n
//在f函数内部声明的f函数


function f(){



alert(n);


}


return f;//将f函数作为f函数的返回值

}

var result=f();//f调用完后的返回值是一个f函数,此时result就是f函数

result(); // 999,调用f2函数

运行结果:

 JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解

三、闭包的概念

上一节代码中的f2函数,就是闭包。各种专业文献上的"闭包"(closure)定义非常抽象,比如有这样的一个闭包定义:"JavaScript闭包就是在另一个作用域中保存了一份它从上一级函数或者作用域得到的变量,而这些变量是不会随上一级函数的执行完成而销毁",对于这样的闭包定义,我是很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁

四、闭包的用途

闭包可以用在许多地方。它的最大用处有两个一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

怎么来理解这句话呢?请看下面的代码。

function f(){

var n=;
//nAdd是一个没有使用var声明的全局变量,这个变量现在指向了在f函数内部声明的一个匿名函数


nAdd=function(){n+=}


function f(){



alert(n);


}


return f;

}

var result=f();//result就是f函数

result();//第一次调用result函数 

nAdd();//nAdd代表的就是在f函数内部声明的一个匿名函数,nAdd()就是在调用匿名函数

result();//第二次调用result函数 1000

运行结果:

 JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解

在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。

为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,因此 nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

五、使用闭包的注意点

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

六、思考题

如果能理解下面两段代码的运行结果,应该就算理解闭包的运行机制了。

代码片段一:

var name = "The Window";
var object = {


name : "My Object",


getNameFunc : function(){



return function(){




return this.name;



};


}

};

alert(object.getNameFunc()());

运行结果:

 JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解

代码片段二:

var name = "The Window";
var object = {


name : "My Object",


getNameFunc : function(){



var that = this;



return function(){




return that.name;



};


}

};

alert(object.getNameFunc()());

运行结果:

 JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解

下面给代码加上注释,分析上述两个代码片段的运行结果:

代码片段一:

分析如下:

/*
在JavaScript中,我们声明的JavaScript全局对象、全局函数以及全局变量均自动成为window对象的成员。
全局变量是window对象的属性。
全局函数是window对象的方法。
*/
var name = "The Window";//声明一个全局变量name,此时这个全局变量name就自动成为了window对象的一个属性
//证明:
alert("window.name:"+window.name);//能用window.name(对象名.属性名)的形式去访问name,那么就证明了这个全局变量name就自动成为了window对象的一个属性
//声明全局对象object,此时这个全局变量object就自动成为了window对象的一个属性
var object = {
 name : "My Object",//object对象的属性name

getNameFunc : function(){//object对象的getNameFunc函数
//object对象的getNameFunc方法的返回值是一个匿名函数



return function(){
//此时这个this指的是哪个对象呢,指的是window对象,哪个对象调用this所在的函数,this指的就是哪个对象。
//证明匿名函数里面的this代表的是window对象而不是object
alert("this==object的结果是:"+(this==object));
alert("this==window的结果是:"+(this==window));




return this.name;//既然this代表的是window对象,那么this.name访问的自然就是window对象的名字"The Window"



};


}
};
//证明:全局对象object是window对象的一个属性
alert("window.object:"+window.object);
alert("window.object.name:"+window.object.name);
/*
调用完getNameFunc方法后,返回一个匿名方法,
此时retFn代表的就是匿名方法,现在相当于给匿名方法起了一个名字叫retFn,
此时的retFn函数自动成为了window对象的一个函数
*/
var retFn = object.getNameFunc();
alert(retFn());//调用返回的匿名方法,那么是谁在调用这个匿名方法呢?是window对象
//证明:retFn函数是window对象的一个函数
alert("window.retFn():"+window.retFn());//能用window.retFn()(对象名.方法名)的形式去调用retFn方法,那么就证明了retFn函数是window对象的一个函数

代码片段二:

分析如下:

var name = "The Window";//全局变量name
//全局对象object
var object = {

name : "My Object",


getNameFunc : function(){
/*
此时这个this代表的是哪个对象呢,this此时代表的是object对象,哪个对象调用this所在的函数,this指的就是哪个对象
执行完that = this后,此时that也代表object对象
*/
var that = this;//that是在getNameFunc函数里面声明的一个局部变量
//证明getNameFunc函数里面的this代表的是object对象而不是window
alert("this==object的结果是:"+(this==object));
alert("this==window的结果是:"+(this==window));
//证明that代表的是object对象
alert("that==object的结果是:"+(that==object));



return function(){
/*that是在getNameFunc函数里面声明的一个局部变量,
正常情况下getNameFunc函数调用完成后,that这个局部变量就会被JavaScript的GC回收,释放掉that这个局部变量所占用的内存空间,
但是现在that却能一直正常使用,没有被回收,
原因就在于getNameFunc是这个匿名函数的父函数,而getNameFunc函数调用完后会将这个匿名函数返回并被赋给了一个全局变量retFn,这导致匿名函数始终在内存中,
而匿名函数的存在依赖于getNameFunc函数,因此getNameFunc函数也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
既然getNameFunc函数始终在内存中,那么在getNameFunc函数内部声明的that局部变量在内存中也会一直存在,既然存在,那么当然可以继续使用了。
*/




return that.name;//that代表的是object对象,那么that.name访问的自然就是object对象的名字"My Object"



};


}

};
var retFn = object.getNameFunc();//调用完getNameFunc方法后,返回一个匿名方法,此时retFn代表的就是匿名方法,现在相当于给匿名方法起了一个名字叫retFn

alert(retFn());

最后也附上一个我以前学习JavaScript闭包时写的一个例子:

<script type="text/javascript">
function A(){
var i = ;//声明在A函数内部的局部变量i
//声明在A函数的内部的子函数b
function b(){
alert("i = "+(++i));//在子函数b内部访问声明在A函数内部的局部变量i
}
return b;//返回b这个函数的地址
}
/*
在执行完var c = A()后,变量c实际上是指向了函数b,b中用到了变量i,
再执行c()后会弹出一个窗口显示i的值(第一次为),
这段代码其实就是创建了一个闭包,
因为函数a外的变量c引用了函数a内部的函数b
也就是说:当函数a的内部函数b被函数a外的一个变量引用的时候,
就创建了一个所谓的"闭包"
闭包的作用就是在a执行完并返回后,
闭包使得JavaScript的垃圾回收机制GC不会收回a所占用的资源,
因为a的内部函数b的执行需要依赖a中的变量
*/
A();//此时内存中肯定会有i的空间,当执行完A()之后,GC就会回收为i分配的内存空间
var c = A();//这种用法,GC不会把i当成垃圾处理掉
c();//相当于调用b(),结果是:i=
c();//结果是:i=
c();//结果是:i=
</script>

运行结果:

JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解

以上内容是小编给大家介绍的JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解的相关内容,希望对大家有所帮助!

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
实现高性能javascript的注意事项
May 27 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 #Javascript
基于jQuery实现点击列表加载更多效果
May 31 #Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 #Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 #Javascript
Bootstrap表单布局样式代码
May 31 #Javascript
jQuery使用经验小技巧(推荐)
May 31 #Javascript
JavaScript知识点总结(十)之this关键字
May 31 #Javascript
You might like
php 方便水印和缩略图的图形类
2009/05/21 PHP
php join函数应用
2011/05/04 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
微信支付开发发货通知实例
2016/07/12 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
python切换hosts文件代码示例
2013/12/31 Python
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
python字符串替换的2种方法
2014/11/30 Python
浅谈Python peewee 使用经验
2017/10/20 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
Python实现自动整理文件的脚本
2020/12/17 Python
Django视图类型总结
2021/02/17 Python
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
实习生体会的自我评价范文
2013/11/28 职场文书
双十佳事迹材料
2014/01/29 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
销售会议开幕词
2016/03/04 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书