js的匿名函数使用介绍


Posted in Javascript onDecember 11, 2013

1.匿名函数概述

关于匿名函数的第一次认识还是在jquery源码里,打开jQuery首先看到的是

(function( window, undefined ) {.......................})(window);

这就是一个匿名函数,红色为参数,匿名函数的作用是创建一块封闭区域,外面不能够访问里面的变量和方法。

既然不能访问,那怎么能调用jquery?这是因为jquery的匿名函数有这样两句话(蓝色字):

(function( window, undefined ) { // Define a local copy of jQuery 
var jQuery = function( selector, context ) { 
// The jQuery object is actually just the init constructor 'enhanced' 
return new jQuery.fn.init( selector, context ); 
}, 
......... 
window.jQuery = window.$ = jQuery; 
})(window);

原来在匿名函数里将jQuery传给了window,这也就是为什么参数的传递中要传递window,所以以后每次调用jquery其实是调用window的jQuery这个对象。

由jquery调用自己里面的方法。外面是无法调用的,这样可以保证安全和不冲突。

2.接着上面的话题,关于jQuery的插件

以下是我写的分页控件的部分代码:

;(function ($) { $.fn.tabing = function (arg) { 
instance = new Plugin(this, arg); 
}; 
var instance = null; 
function Plugin(element){ 
this._tabs = $(element); 
this._tabli = $("a[href*='#']",this._tabs); 
this._tabDiv = this._tabs.siblings().filter("div[id*='tab']"); 
this.init(); 
} 
Plugin.prototype = { 
init: function(){ 
this._tabli.addClass("unselected"); 
this._tabli.eq(0).addClass("selected"); 
this._tabDiv.css("display","none"); 
this._tabDiv.eq(0).css("display","block"); 
this._tabli.each(function(){ 
$(this).bind("click",function(){ 
for(var i = 0;i<instance._tabDiv.length;i++){ 
instance._tabDiv.eq(i).css("display","none"); 
} 
instance._tabDiv.filter("#"+$(this).attr("href").split('#')[1]).css("display","block"); 
}); 
}) 
} 
} 
})(jQuery);

注意红色的字,其实jQuery插件也是在写匿名函数,这样保证每个插件的独立性,要不怎么叫插件,红色的字$.fn.tabing说明在这个插件里面有个tabing给了jquery的fn,

这样外面的jquery对象就可以直接调用tabing,这也是插件与外界的唯一接触。

3. 说完了jquery插件对匿名函数的使用,再说一下window的匿名函数

其实jquery本身就是window的匿名函数,即第一点,那我们怎么写window的匿名函数呢?

即写了匿名函数后,在函数里面有个与window交互的接口,例如下面:

(function(){ 
function getObjByID(id){ 
return document.getElementById(id); 
} 
function __addClass(id,className,classValue){ 
$(id).style.className=classValue; 
} 
window.addClass=__addClass; 
})();

同样是看红色的字,这样在该匿名函数外就可以调用addClass(),但无法调用getObjByID()。

4.匿名函数也会在解析的时候执行

如下:

function Video() { }; 
function Movie() { }; var _video = new Video(); 
_video.size = 3; 
_video.toString = function () { 
return "video"; 
}; 
_video.getName = function () { 
return "VideoXXX"; 
}; 
var _movie = new Movie(); 
(function (parent, child) { 
for (var ele in parent) { 
if (!child[ele]) //在child不包含该属性或者方法的时候,才会拷贝parent的一份 
child[ele] = parent[ele]; 
} 
})(_video, _movie); //匿名函数调用的方式 
alert(_movie.size); //3 
alert(_movie.toString()); //[object Object] 
alert(_movie.getName()); //VideoXXX

三个alert都有结果,说明了匿名函数内部执行了。
Javascript 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
jquery ajax jsonp跨域调用实例代码
Dec 11 #Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 #Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 #Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 #Javascript
判断javascript的数据类型(示例代码)
Dec 11 #Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 #Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 #Javascript
You might like
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
PHP实现货币换算的方法
2014/11/29 PHP
javascript add event remove event
2008/04/07 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
python字符串对其居中显示的方法
2015/07/11 Python
Python输出带颜色的字符串实例
2017/10/10 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
浅谈python3中input输入的使用
2019/08/02 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
基于Python实现天天酷跑功能
2021/01/06 Python
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
护士自我鉴定
2013/10/23 职场文书
大学生自我鉴定
2013/12/16 职场文书
公司租房协议书
2014/10/14 职场文书
质检员工作总结2015
2015/04/25 职场文书
公积金贷款承诺书
2015/04/30 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python