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 相关文章推荐
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
jQuery选择器基础入门教程
May 10 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 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 IN_ARRAY 函数使用注意事项
2010/07/24 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
js 动态选中下拉框
2009/11/26 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
python如何将图片转换为字符图片
2020/08/19 Python
Django CBV类的用法详解
2019/07/26 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
static关键字的用法
2013/10/07 面试题
传媒专业推荐信范文
2013/11/23 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android