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学习笔记8 用JSON做原型
Jan 11 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
vue微信分享插件使用方法详解
Feb 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
国内咖啡文化
2021/03/03 咖啡文化
PHP 安全检测代码片段(分享)
2013/07/05 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python实现建立SSH连接的方法
2015/06/03 Python
Python的pycurl包用法简介
2015/11/13 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
Django ORM filter() 的运用详解
2020/05/14 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
python openCV自制绘画板
2020/10/27 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
销售人员职业生涯规划范文
2014/03/01 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
先进工作者个人总结
2015/02/15 职场文书
统计员岗位职责范本
2015/04/14 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android