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 相关文章推荐
jQuery 使用手册(四)
Sep 23 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
javascript实现五星评分功能
Nov 10 Javascript
Sea.JS知识总结
May 05 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 Javascript
canvas 中如何实现物体的框选
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设置图片文件上传大小的具体实现方法
2013/10/11 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
微信小程序支付及退款流程详解
2017/11/30 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
pyside写ui界面入门示例
2014/01/22 Python
python使用marshal模块序列化实例
2014/09/25 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python yield 使用浅析
2015/05/28 Python
Python并行分布式框架Celery详解
2018/10/15 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
学python爬虫能做什么
2020/07/29 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
实习协议书范本
2014/09/25 职场文书
2014年环保工作总结
2014/11/26 职场文书
大学生入党群众意见书
2015/06/02 职场文书
小学教师教学反思
2016/02/24 职场文书
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
mysql查找连续出现n次以上的数字
2022/05/11 MySQL