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 相关文章推荐
读jQuery之四(优雅的迭代)
Jun 20 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
浅谈Vue数据响应
Nov 05 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 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
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
Python脚本实现自动发带图的微博
2016/04/27 Python
python查看微信好友是否删除自己
2016/12/19 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
利用Python检测URL状态
2019/07/31 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
pytorch 求网络模型参数实例
2019/12/30 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
Java软件工程师综合面试题笔试题
2013/09/08 面试题
党委书记个人对照检查材料
2014/09/15 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang