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生成GUID的多种算法小结
Aug 18 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
JS匿名函数实例分析
Nov 26 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
vue实现文字加密功能
Sep 27 Javascript
Vue和React有哪些区别
Sep 12 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
火车头采集器3.0采集图文教程
2007/03/17 PHP
用php解析html的实现代码
2011/08/08 PHP
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
Python实现简单的代理服务器
2015/07/25 Python
分析Python读取文件时的路径问题
2018/02/11 Python
Sanic框架流式传输操作示例
2018/07/18 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
Python3中列表list合并的四种方法
2019/04/19 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python中栈的原理及实现方法示例
2019/11/27 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
前台接待员岗位职责
2014/01/02 职场文书
简单租房协议书
2014/04/09 职场文书
英语教师求职信
2014/06/16 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript