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 相关文章推荐
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
javascript两段代码,两个小技巧
Feb 04 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
VueJS实现用户管理系统
May 29 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错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python缩进和冒号详解
2016/06/01 Python
使用python实现ANN
2017/12/20 Python
python取代netcat过程分析
2018/02/10 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
南京软件公司的.net程序员笔试题
2014/08/31 面试题
应用数学自荐书范文
2013/11/24 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
文明演讲稿范文
2014/05/12 职场文书
广告学专业求职信
2014/06/19 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS