匿名函數的作用是創建一塊封閉區域,外面不能夠訪問裡面的變量和方法,下面為大家介紹下什麼是匿名函數及其如何使用
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