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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
js动态引入的四种方法
May 05 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
js的各种数据类型判断的介绍
Jan 19 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 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
php intval函数用法总结
2019/04/14 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
Python操作SQLite简明教程
2014/07/10 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
python中函数默认值使用注意点详解
2016/06/01 Python
python监控文件或目录变化
2016/06/07 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
python代码区分大小写吗
2020/06/17 Python
Python常用断言函数实例汇总
2020/11/30 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
老总助理工作岗位职责
2014/02/06 职场文书
三方协议书
2015/01/27 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
python爬取豆瓣电影TOP250数据
2021/05/23 Python
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python