javascript,jquery闭包概念分析


Posted in Javascript onJune 19, 2010

但javascript我是经常要用,所以是要懂这里面的概念。
其实javascript里的闭包概念很简单,就是函数用到外部变量,不需要传参就可以获取。
举个例子:

<script> 
var sMessage = "Hello world"; 
function sayHello(){ 
alert(sMessage); 
} 
sayHello(); 
addNumber(1,2); var iBaseNum = 10; 
function addNumber(iNum1, iNum2) { 
function doAddition() { 
alert(iNum1 + iNum2 + iBaseNum); 
} 
return doAddition(); 
} 
function a(){ 
var i=0; 
function b(){ 
alert(++i); 
} 
return b; 
} 
var c = a(); 
c(); 
c(); 
</script>

第一个函数sayHello没有传参数,直接利用了sMessage变量,这个就叫做闭包。
第二个函数复杂点,里面有个doAddition也是闭包函数,他不需要参数,直接在执行环境中获取iNum1,iNum2,还有外部变量 iBaseNum。
第三个函数 是能保护 i变量的访问,并且一直保存i在内存中,可以一直增加。(闭包的一个经典用法)
jquery中闭包也差不多,先给个例子

你也许会问

(function($){ 
$("div p").click(function(){alert("cssrain!")}); 
})(jQuery); //一个闭包

这是什么写法啊?
别急,我也是请教了upc ,才稍微懂了点。
这里面的$只是形参,但jquery是全局变量,所以不需要调用该函数就会自动执行,或者分两步
就是转化成正常的函数,先写函数,后调用。
如下所示
其实:
(function($){ 
$("div p").click(。。。); 
})(jQuery);

就是等于
function tempFunction($){ //创建一个以$为形参的函数 
$("div p").click(....); 
} 
TempFunction(jQuery); //传入实参jQuery执行函数.

干脆直接这么写 ,算了
(function(cssrain){ 
cssrain("div p").click(.... ); 
})(jQuery); //一个闭包

闭包的基本写法:
(function(){do someting})();
//这个你就理解为定义一个匿名函数并立即执行
带参数的话就这样:
(function(形参){do someting})(实参);
另外
(function(){var upc="i am upc"})();
alert(upc);
会提示undefined。
因为闭包后,里面的变量就相当于局部了。
闭包的好处:
不增加额外的全局变量,
执行过程中所有变量都是在匿名函数内部。
上面的例子不是很好,跟javascript的闭包有点混淆,但这确实也是jquery中的一种闭包。只不过经过jquery的加工罢了。
如过有什么不对,大家互相讨论,我也是初学者,还有很多不懂得地方。

Javascript 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
基于jquery的滚动新闻列表
Jun 19 #Javascript
基于Jquery的温度计动画效果
Jun 18 #Javascript
JQuery Dialog的内存泄露问题解决方法
Jun 18 #Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 #Javascript
jquery ready()的几种实现方法小结
Jun 18 #Javascript
JQuery在光标位置插入内容的实现代码
Jun 18 #Javascript
JavaScript Chart 插件整理
Jun 18 #Javascript
You might like
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
php实现的Timer页面运行时间监测类
2014/09/24 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
可输入的下拉框
2006/06/19 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
Python画图高斯分布的示例
2019/07/10 Python
Django models filter筛选条件详解
2020/03/16 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
中学教师请假制度
2014/02/03 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
奖金申请报告模板
2015/05/15 职场文书
小学感恩主题班会
2015/08/12 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
Python - 10行代码集2000张美女图
2021/05/23 Python
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL