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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
js实现上传图片及时预览
May 07 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
小程序实现多列选择器
Feb 15 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
基于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
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
javascript arguments使用示例
2014/12/16 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
angular2使用简单介绍
2016/03/01 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
应届生求职自荐信范文
2014/04/07 职场文书
幼儿教师求职信
2014/05/24 职场文书
小学生读书活动总结
2014/06/30 职场文书
安全生产年活动总结
2014/08/29 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
创业计划书之花店
2019/09/20 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
mysql insert 存在即不插入语法说明
2022/03/25 MySQL