js的匿名函數使用介紹_基礎知識

1.匿名函數概述

關於匿名函數的第一次認識還是在jquery源碼裡，打開jQuery首先看到的是

複製程式碼 程式碼如下:

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

這就是一個匿名函數，紅色為參數，匿名函數的作用是創建一塊封閉區域，外面不能夠訪問裡面的變數和方法。

既然不能訪問，那怎麼能呼叫jquery？這是因為jquery的匿名函數有這樣兩句話（藍色字）：

複製程式碼 程式碼如下:

(function( window, undefined ) {

// Define a local copy of jQuery
var jQuery = function( selector, context ) { 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 (arging = function (arging = function (arging = function (arging = function ) {
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;iinstance._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.getElementBy 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都有結果，說明了匿名函數內部執行了。