DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> js的匿名函數使用介紹
js的匿名函數使用介紹
編輯:JavaScript基礎知識     
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都有結果,說明了匿名函數內部執行了。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved