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 相关文章推荐
JS的replace方法详细介绍
Nov 09 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
移动端js触摸事件详解
Sep 18 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 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批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
详解tween.js 中文使用指南
2018/01/05 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
Python中的元组介绍
2019/01/28 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
Python collections模块的使用方法
2020/10/09 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
工商管理毕业生推荐信
2013/12/24 职场文书
应用心理学专业求职信
2014/08/04 职场文书
2014年教研员工作总结
2014/12/23 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
让文件路径提取变得更简单的Python Path库
2021/05/27 Python