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 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
原生JS实现层叠轮播图
May 17 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
express express-session的使用小结
Dec 12 Javascript
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
destoon公司主页模板风格的添加方法
2014/06/20 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
JavaScript的Function详细
2006/11/14 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
信用社实习人员自我鉴定
2013/09/20 职场文书
六十岁生日答谢词
2014/01/10 职场文书
个人自我评价范文
2014/02/05 职场文书
八项规定整改措施
2014/02/12 职场文书
中青班党性分析材料
2014/02/16 职场文书
法人委托书范本格式
2014/09/15 职场文书
公司租房协议书范本
2014/10/08 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL