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 加载和执行-性能提高篇
Dec 28 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 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操作文件方法问答
2007/03/16 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
JavaScript实现打字游戏
2021/02/19 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
python小程序实现刷票功能详解
2019/07/17 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
abstract是什么意思
2012/02/12 面试题
学习十八届三中全会精神实施方案
2014/02/17 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
工作自我评价范文
2015/03/05 职场文书
小学生安全保证书
2015/05/09 职场文书