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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
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
ZF等常用php框架中存在的问题
2008/01/10 PHP
php HandlerSocket的使用
2011/05/02 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
PHP反射API示例分享
2016/10/08 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
JS 自动安装exe程序
2008/11/30 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
JavaScript实现HSL拾色器
2020/05/21 Javascript
python中的字典操作及字典函数
2018/01/03 Python
Python中的TCP socket写法示例
2018/05/11 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
解决c++调用python中文乱码问题
2020/07/29 Python
华为慧通面试题
2012/09/11 面试题
企业党员个人自我评价
2014/09/20 职场文书
离职报告范文
2014/11/04 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
南湾猴岛导游词
2015/02/09 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
辛亥革命观后感
2015/06/02 职场文书
公司车队管理制度
2015/08/04 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server