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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
JavaScript 事件对象的实现
Jul 13 Javascript
深入认识javascript中的eval函数
Nov 02 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
让table变成exls的示例代码
Mar 24 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 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/11/25 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
js星星评分效果
2014/07/24 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
python Django模板的使用方法(图文)
2013/11/04 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
考试退步检讨书
2014/01/15 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
乳制品整治工作方案
2014/05/29 职场文书
优秀教师事迹材料
2014/12/15 职场文书
2015大学迎新标语
2015/07/16 职场文书
八年级数学教学反思
2016/02/17 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS