js的匿名函數使用介紹

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._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