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 相关文章推荐
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
JS简单计算器实例
Jan 20 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
关于Vue Router的10条高级技巧总结
May 06 Vue.js
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(3)
2006/10/09 PHP
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
mac下安装nginx和php
2013/11/04 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
英语系毕业生自荐信
2013/10/31 职场文书
分家协议书
2014/04/21 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
商务经理岗位职责
2014/08/03 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
大学生暑期实践报告
2015/07/13 职场文书
企业宣传稿范文
2015/07/23 职场文书
寒假致家长的一封信
2015/10/10 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
如何使用PyCharm及常用配置详解
2021/06/03 Python
Golang 并发下的问题定位及解决方案
2022/03/16 Golang