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学习随笔(使用window和frame)的技巧
Mar 08 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 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
人族 TERRAN 概述
2020/03/14 星际争霸
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
Python字典操作简明总结
2015/04/13 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
简单谈谈Python流程控制语句
2016/12/04 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
python实现远程控制电脑
2019/05/23 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
会计实习期自我鉴定
2013/10/06 职场文书
会计应届生的自荐信
2013/12/13 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
优秀护士事迹材料
2014/12/25 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
红色故事汇观后感
2015/06/18 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis