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 相关文章推荐
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
详解JS中的attribute属性
Apr 25 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 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
一个php作的文本留言本的例子(五)
2006/10/09 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
JS阻止用户多次提交示例代码
2014/03/26 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
python实现简单中文词频统计示例
2017/11/08 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
英语感恩演讲稿
2014/01/14 职场文书
生物技术专业求职信
2014/06/10 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
验房委托书
2014/08/30 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
AJAX学习笔记
2021/05/18 Javascript