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 相关文章推荐
javascript 45种缓动效果 非常酷
Jun 28 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 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
Zend 输出产生XML解析错误
2009/03/03 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
JavaScript原型链示例分享
2014/01/26 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
js实现转动骰子模型
2019/10/24 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
用Python编写简单的微博爬虫
2016/03/04 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
详解python中的json和字典dict
2018/06/22 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
详解如何修改python中字典的键和值
2020/09/29 Python
python tqdm库的使用
2020/11/30 Python
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
公司领导推荐信
2013/11/12 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
医院见习报告范文
2014/11/03 职场文书
导游欢送词
2015/01/31 职场文书
小石潭记导游词
2015/02/03 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
面试通知邮件
2015/04/20 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
关于Python使用turtle库画任意图的问题
2022/04/01 Python