您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > JavaScript中的匿名函數(shù)及函數(shù)的閉包

JavaScript中的匿名函數(shù)及函數(shù)的閉包

文章來源：365jz.com 點擊數(shù)：216 更新時間：2009-09-13 10:32 參與評論

匿名函數(shù)

函數(shù)是JavaScript中最靈活的一種對象，這里只是講解其匿名函數(shù)的用途。匿名函數(shù)：就是沒有函數(shù)名的函數(shù)。

1、函數(shù)的定義，首先簡單介紹一下函數(shù)的定義，大致可分為三種方式

第一種：這也是最常規(guī)的一種

function double( x ){
return 2 * x;
}

第二種：這種方法使用了Function構(gòu)造函數(shù)，把參數(shù)列表和函數(shù)體都作為字符串，很不方便，不建議使用。

var double = new Function( 'x' , ' return 2 * x;');

第三種：

var double = function( x ) { return 2* x; }

注意 '='右邊的函數(shù)就是一個匿名函數(shù)，創(chuàng)造完畢函數(shù)后，又將該函數(shù)賦給了變量square。

2、匿名函數(shù)的創(chuàng)建

第一種方式：就是上面所講的定義square函數(shù)，這也是最常用的方式之一。

第二種方式：

(function( x , y){
alert( x + y);
})(2 ,3 );

這里創(chuàng)建了一個匿名函數(shù)(在第一個括號內(nèi))，第二個括號用于調(diào)用該匿名函數(shù)，并傳入?yún)?shù)。

閉包

閉包的英文單詞是closure，這是JavaScript中非常重要的一部分知識，因為使用閉包可以大大減少我們的代碼量，使我們的代碼看上去更加清晰等等，總之功能十分強(qiáng)大。

閉包的含義：閉包說白了就是函數(shù)的嵌套，內(nèi)層的函數(shù)可以使用外層函數(shù)的所有變量，即使外層函數(shù)已經(jīng)執(zhí)行完畢（這點涉及JavaScript作用域鏈）。

示例一：

function checkClosure(){
    var str = 'rain-man';
    setTimeout(
        function(){ alert( str ); } //這是一個匿名函數(shù)
    , 2000);
}
checkClosure();

這個例子看上去十分的簡單，仔細(xì)分析下它的執(zhí)行過程還是有許多知識點的：checkClosure函數(shù)的執(zhí)行是瞬間的（也許用時只是0.00001毫秒），在checkClosure的函數(shù)體內(nèi)創(chuàng)建了一個變量str，在checkClosure執(zhí)行完畢之后str并沒有被釋放，這是因為setTimeout內(nèi)的匿名函數(shù)存在這對str的引用。待到2秒后函數(shù)體內(nèi)的匿名函數(shù)被執(zhí)行完畢,str才被釋放。

示例二：優(yōu)化代碼

Code

舉例

匿名函數(shù)最大的用途是創(chuàng)建閉包（這是JavaScript語言的特性之一），并且還可以構(gòu)建命名空間，以減少全局變量的使用。

示例三：

var oEvent = {};
(function(){
var addEvent = function(){ /*代碼的實現(xiàn)省略了*/ };
function removeEvent(){}

oEvent.addEvent = addEvent;
oEvent.removeEvent = removeEvent;
})();

在這段代碼中函數(shù)addEvent和removeEvent都是局部變量，但我們可以通過全局變量oEvent使用它，這就大大減少了全局變量的使用，增強(qiáng)了網(wǎng)頁的安全性。

我們要想使用此段代碼：oEvent.addEvent( document.getElementById('box') , 'click' , function(){} );

示例四：

var rainman = (function( x , y ){
return x + y;
})( 2 , 3 );
/**
*也可以寫成下面的形式，因為第一個括號只是幫助我們閱讀，但是不推薦使用下面這種書寫格式。
var rainman = function( x , y ){
return x + y;
}( 2 , 3 );
*/

在這里我們創(chuàng)建了一個變量rainman，并通過直接調(diào)用匿名函數(shù)初始化為5，這種小技巧有時十分實用。

示例五：

var outer = null;

(function(){
var one = 1;
function inner (){
    one += 1;
    alert( one );
}
outer = inner;
})();

outer();    //2
outer();    //3
outer();    //4

這段代碼中的變量one是一個局部變量（因為它被定義在一個函數(shù)之內(nèi)），因此外部是不可以訪問的。但是這里我們創(chuàng)建了inner函數(shù)，inner函數(shù)是可以訪問變量one的；又將全局變量outer引用了inner，所以三次調(diào)用outer會彈出遞增的結(jié)果。

注意

一：閉包允許內(nèi)層函數(shù)引用父函數(shù)中的變量，但是該變量是最終值。

示例六：

Code

你會發(fā)現(xiàn)當(dāng)鼠標(biāo)移過每一個<li>元素時，總是彈出4，而不是我們期待的元素下標(biāo)。這是為什么呢？注意事項里已經(jīng)講了（最終值）。顯然這種解釋過于簡單，當(dāng)mouseover事件調(diào)用監(jiān)聽函數(shù)時，首先在匿名函數(shù)（ function(){ alert(i); }）內(nèi)部查找是否定義了 i，結(jié)果是沒有定義；因此它會向上查找，查找結(jié)果是已經(jīng)定義了，并且i的值是4（循環(huán)后的i值）；所以，最終每次彈出的都是4。

解決方法一：

Code