您的位置
主页 > 网站技术 > 语言编程 > » 正文

js的匿名函数使用介绍

来源: 站长圈 点击:

匿名函数的作用是创建一块封闭区域,外面不能够访问里面的变量和方法,下面为大家介绍下什么是匿名函数及其如何使用,希望对大家有所帮助!

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._tabp = this._tabs.siblings().filter("p[id*='tab']"); 

this.init(); 

Plugin.prototype = { 

init: function(){ 

this._tabli.addClass("unselected"); 

this._tabli.eq(0).addClass("selected"); 

this._tabp.css("display","none"); 

this._tabp.eq(0).css("display","block"); 

this._tabli.each(function(){ 

$(this).bind("click",function(){ 

for(var i = 0;i<instance._tabp.length;i++){ 

instance._tabp.eq(i).css("display","none"); 

instance._tabp.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都有结果,说明了匿名函数内部执行了。 




首页  - 关于站长圈  - 广告服务  - 联系我们  - 关于站长圈  - 网站地图  - 版权声明