我的漫漫程序之旅
专注于JavaWeb开发
JavaScript闭包详解
1、何谓闭包
JavaScript例子:
function
GISMapPanel()
{
this
.mapPanel
=
document.getElementById(
"
mapDiv
"
);
this
.width;
this
.height;
this
.showMap
=
function
()
{
alert(
this
.mapPanel);
//
tip:[object]
this
.mapPanel.onmousedown
=
this
.mouseDownEventProcess();
}
this
.mouseDownEventProcess
=
function
( )
{
var
_this
=
this
;
return
function
()
{
alert(
this
.mapPanel);
//
tip:undefined,why;
_this.width
=
400
;
_this.height
=
300
;
//
other codes
}
}
}
闭包简单的解释是,ECMAScript允许inner functions(嵌套函数):函数可以定义在另外一个函数里面。这些内部的函数可以访问outer function(父函数)的local变量,参数,其它内部函数。当内部函数被构造,并可以在函数外被获得(函数当成返回值),这个内部函数在 outer function返回后被执行(在outer函数外执行),那一个闭包形成了。
闭包特征:A、作为一个函数变量的一个引用,当函数返回时,其处于激活状态;B、一个闭包就是当一个函数返回时,一个没有释放资源的栈区。
2、 闭包隐喻
function就像房子内的居室(也是房子),可以租给给甲居住,甲就是居室(function)的主人(this),也可以租给乙住,乙就成为居室(function)的主人(this),甲原来的一切则被甲带走,乙用不到任何甲的东西。如果甲是房子(外层function)的主人,并把某居室(内层function)租给乙,乙具有居室内的一切,而乙也可以使用甲的卫生间、客厅(外层函数变量,如_this)。闭包变量就是外层房子内变量,包括居室(function)、卫生间、客厅(外层函数变量)。同JavaScript闭包,居室可以是一局、两局、多局,当然一局一般比较好租,JavaScript闭包一般也是一局。
3、闭包作用
面向对象编程的成功和流行,使不支持面向的对象编程的语言也尽量往这个方向靠,如C语言可以通过struct及function指针,模拟面向对象编程,以期达到面向对象的封装、多态;JavaScript则通过基于对象编制以期达到封装性。如上例所示,把地图(div)相关的事件处理代码、相关属性、相关方法集中到GISMapPanel对象中。但由于事件发生的实体是地图对应的div对象,事件函数调用时房子是由div对象居住的,也就是说this是div元素,因此,会出现alert(this.mapPanel); //tip:undefined,div元素没有属性mapPanel;如果想要访问原GISMapPanel对象中的属性,就要象例子所示,把GISMapPanel对象当作一个客厅来处理,从而可以使用客厅内的东西,而不是别人居室内的东西(也是访问不到的,正如alert(this.mapPanel); //tip:undefined,该this就不是外层居室的this了,本来想直接访问外层居室的this)。通过闭包、基于对象,取代了全局变量、函数方式的JavaScript处理事件、业务逻辑处理手段,增加了模块性、封装性、问题局部化等特性。
posted on 2008-07-20 22:36
々上善若水々
阅读(36)
评论(0)
编辑
收藏
所属分类:
JavaScript
IT新闻
新用户注册
刷新评论列表
标题
姓名
主页
验证码
*
内容(请不要发表任何与政治相关的内容)
Remember Me?
登录
使用高级评论
新用户注册
返回页首
恢复上次提交
[使用Ctrl+Enter键可以直接提交]
相关文章:
Ext中常用的获取元素(get)的方法及区别
Ext 复杂Form布局
Ext Form 的 验 证
Ext Form daterange&passwordfield 练习
Ext Form 简单练习之一(login Form)
Ext Buttn and MessageBox 简单练习
验证身份证的完整函数
Prototype1.6 实战11 (Ajax)
ExtJs 之简单 Form提交
Prototype1.6 实战10 (String)
相关链接:
网站导航:
博客园
BlogJava
博客生活
IT博客网
C++博客
PHP博客
博客园社区
管理博客
教师博客
天文博客
汽车博客
足球博客
股票博客
电子博客
管理
导航
首页
新随笔
联系
管理
<
2008年12月
>
日
一
二
三
四
五
六
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
统计
随笔 - 21
文章 - 279
评论 - 140
引用 - 0
留言簿
(12)
给我留言
查看公开留言
查看私人留言
随笔档案
(24)
2008年11月 (3)
2008年9月 (2)
2008年8月 (1)
2008年7月 (2)
2008年6月 (2)
2008年5月 (9)
2008年4月 (2)
2007年12月 (3)
文章分类
(277)
AJAX(7)
(rss)
Hibernate(3)
(rss)
J2ME(2)
(rss)
J2SE(36)
(rss)
JavaScript(57)
(rss)
JavaWeb(24)
(rss)
Java笔试与面试(52)
(rss)
opensource(13)
(rss)
Spring(9)
(rss)
SSH整合系列(2)
(rss)
Struts1.x(3)
(rss)
Struts2(11)
(rss)
WebService(14)
(rss)
数据库(10)
(rss)
数据结构与算法(7)
(rss)
设计模式(17)
(rss)
软件测试(10)
(rss)
文章档案
(228)
2008年12月 (1)
2008年11月 (4)
2008年10月 (2)
2008年9月 (2)
2008年8月 (10)
2008年7月 (22)
2008年6月 (13)
2008年5月 (45)
2008年4月 (17)
2008年3月 (5)
2008年2月 (11)
2008年1月 (27)
2007年12月 (45)
2007年11月 (24)
搜索
最新评论
1. re: javascript文件夹选择框的两种解决方案
我用了第一中方法。可是还有一个问题,就是选择了远程计算机上的文件夹,怎么获得全路径?
--justin
2. re: Flash图表(FusionChartsV3)的简单应用
就是说网页上有多个图表,当页面加载时所有动画效果已经完成,下边的图表无法看到动画的效果,只是个最终的结果,如果有循环控制的话就可以看到下边的图表时仍然可以看到动画效果,也相当于不断刷新自己吧!谢谢
--左
3. re: Flash图表(FusionChartsV3)的简单应用
不明白你说的什么意思,不断刷新Chart自己?
--々上善若水々
4. re: Flash图表(FusionChartsV3)的简单应用
请问一下楼主,如何让FusionCharts生成的图表在网页上循环播放啊,谢谢!!!
--左
5. re: Struts1.2实现单文件上传
方法太牛比了。mail:yaoyao19851023@163.com
--yaoyao
阅读排行榜
1. 一道Struts面试题(3009)
2. javascript文件夹选择框的两种解决方案(2295)
3. ExtJS & GTGrid 简单用户管理(1833)
4. jexcelapi使用小记(1749)
5. Flash图表(FusionChartsV3)的简单应用 (1706)
评论排行榜
1. Flash图表(FusionChartsV3)的简单应用 (19)
2. [原创]J2ME/J2EE实现用户登录交互(7)
3. Flash图片轮换显示的效果抽取(7)
4. ExtJS & GTGrid 简单用户管理(6)
5. StringBuffer和StringBuilder添加null值的误导(5)