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中的prototype属性实例分析说明
Aug 09 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
React.js入门学习第一篇
Mar 30 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
详解node和ES6的模块导出与导入
Feb 19 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 excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
php自动加载代码实例详解
2021/02/26 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
Python生成pdf文件的方法
2014/08/04 Python
Python XML RPC服务器端和客户端实例
2014/11/22 Python
Python中的zip函数使用示例
2015/01/29 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
详解python字节码
2018/02/07 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
python中的colorlog库使用详解
2019/07/05 Python
python之生成多层json结构的实现
2020/02/27 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
三个Unix的命令面试题
2015/04/12 面试题
临床护士自荐信
2014/01/31 职场文书
《社戏》教学反思
2014/04/15 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android