快捷導(dǎo)航

js的匿名函數(shù)使用介紹

更新時間：2013年12月11日 16:56:58 作者：

匿名函數(shù)的作用是創(chuàng)建一塊封閉區(qū)域，外面不能夠訪問里面的變量和方法，下面為大家介紹下什么是匿名函數(shù)及其如何使用

1.匿名函數(shù)概述

關(guān)于匿名函數(shù)的第一次認識還是在jquery源碼里，打開jQuery首先看到的是

(function( window, undefined ) {.......................})(window);

這就是一個匿名函數(shù)，紅色為參數(shù)，匿名函數(shù)的作用是創(chuàng)建一塊封閉區(qū)域，外面不能夠訪問里面的變量和方法。

既然不能訪問，那怎么能調(diào)用jquery？這是因為jquery的匿名函數(shù)有這樣兩句話（藍色字）：

復(fù)制代碼代碼如下:

 
(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); 

原來在匿名函數(shù)里將jQuery傳給了window，這也就是為什么參數(shù)的傳遞中要傳遞window，所以以后每次調(diào)用jquery其實是調(diào)用window的jQuery這個對象。

由jquery調(diào)用自己里面的方法。外面是無法調(diào)用的，這樣可以保證安全和不沖突。

2.接著上面的話題，關(guān)于jQuery的插件

以下是我寫的分頁控件的部分代碼：

復(fù)制代碼代碼如下:

 
;(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插件也是在寫匿名函數(shù)，這樣保證每個插件的獨立性，要不怎么叫插件，紅色的字$.fn.tabing說明在這個插件里面有個tabing給了jquery的fn，

這樣外面的jquery對象就可以直接調(diào)用tabing，這也是插件與外界的唯一接觸。

3. 說完了jquery插件對匿名函數(shù)的使用，再說一下window的匿名函數(shù)

其實jquery本身就是window的匿名函數(shù)，即第一點，那我們怎么寫window的匿名函數(shù)呢？

即寫了匿名函數(shù)后，在函數(shù)里面有個與window交互的接口，例如下面：

復(fù)制代碼代碼如下:

 
(function(){ 
function getObjByID(id){ 
return document.getElementById(id); 
} 
function __addClass(id,className,classValue){ 
$(id).style.className=classValue; 
} 
window.addClass=__addClass; 
})(); 

同樣是看紅色的字，這樣在該匿名函數(shù)外就可以調(diào)用addClass（），但無法調(diào)用getObjByID（）。

4.匿名函數(shù)也會在解析的時候執(zhí)行

如下：

復(fù)制代碼代碼如下:

 
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); //匿名函數(shù)調(diào)用的方式 

alert(_movie.size); //3 
alert(_movie.toString()); //[object Object] 
alert(_movie.getName()); //VideoXXX 