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动画效果代码
Jul 20 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
详解JavaScript中的坐标和距离
May 27 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的一个简单加密解密代码
2014/01/14 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
python 正则式使用心得
2009/05/07 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
人事经理岗位职责
2014/04/28 职场文书
企业标语大全
2014/07/01 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
2014年政教处工作总结
2014/12/20 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python
vue实现移动端div拖动效果
2022/03/03 Vue.js