JavaScript中的匿名函數及函數的閉包)

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

JavaScript中的匿名函數及函數的閉包

匿名函數

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

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

第一種：這也是最常規的一種

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

第二種：這種方法使用了Function建構函式，把參數列表和函數體都作為字串，很不方便，不建議使用。

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

第三種：

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

注意 '='右邊的函數就是一個匿名函數，創造完畢函數後，又將該函數賦給了變數square。

2、匿名函數的建立

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

第二種方式：

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

這裡建立了一個匿名函數(在第一個括弧內)，第二個括弧用於調用該匿名函數，並傳入參數。

閉包

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

閉包的含義：閉包說白了就是函數的嵌套，內層的函數可以使用外層函數的所有變數，即使外層函數已經執行完畢（這點涉及JavaScript範圍鏈）。

樣本一：

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

這個例子看上去十分的簡單，仔細分析下它的執行過程還是有許多知識點的：checkClosure函數的執行是瞬間的（也許用時只是0.00001毫秒），在checkClosure的函數體內建立了一個變數str，在checkClosure執行完畢之後str並沒有被釋放，這是因為setTimeout內的匿名函數存在這對str的引用。待到2秒後函數體內的匿名函數被執行完畢,str才被釋放。

樣本二：最佳化代碼

Code
function forTimeout( x, y){
    alert( x + y );
}
function delay( x , y  , time ){
    setTimeout( 'forTimeout(' +  x + ',' +  y + ')' , time );
}
/**
*上面的delay函數十分難以閱讀，也不容易編寫，但如果使用閉包就可以讓代碼更加清晰

function delay( x , y , time ){
    setTimeout(
        function(){
            forTimeout( x , y )
        }
    , time );
}

舉例

匿名函數最大的用途是建立閉包（這是JavaScript語言的特性之一），並且還可以構建命名空間，以減少全域變數的使用。

樣本三：

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

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

在這段代碼中函數addEvent和removeEvent都是局部變數，但我們可以通過全域變數oEvent使用它，這就大大減少了全域變數的使用，增強了網頁的安全性。

我們要想使用此段代碼：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 );
*/

在這裡我們建立了一個變數rainman，並通過直接調用匿名函數初始化為5，這種小技巧有時十分實用。

樣本五：

var outer = null;

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

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

這段代碼中的變數one是一個局部變數（因為它被定義在一個函數之內），因此外部是不可以訪問的。但是這裡我們建立了inner函數，inner函數是可以訪問變數one的；又將全域變數outer引用了inner，所以三次調用outer會彈出遞增的結果。

注意

一：閉包允許內層函數引用父函數中的變數，但是該變數是最終值。

樣本六：

Code
/**
<body>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>one</li>
</ul>
*/

var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++ ){
    lists[ i ].onmouseover = function(){
        alert( i );
    };
}

你會發現當滑鼠移過每一個<li>元素時，總是彈出4，而不是我們期待的元素下標。這是為什麼呢？注意事項裡已經講了（最終值）。顯然這種解釋過於簡單，當mouseover事件調用監聽函數時，首先在匿名函數（ function(){ alert(i); }）內部尋找是否定義了 i，結果是沒有定義；因此它會向上尋找，尋找結果是已經定義了，並且i的值是4（迴圈後的i值）；所以，最終每次彈出的都是4。

解決方案一：

Code
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++ ){
    (function( index ){
        lists[ index ].onmouseover = function(){
            alert( index );
        };
    })( i );
}

解決方案二：

Code
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++ ){
    lists[ i ].$$index = i;    //通過在Dom元素上綁定$$index屬性記錄下標
    lists[ i ].onmouseover = function(){
        alert( this.$$index );
    };
}

解決方案三：

Code
function eventListener( list , index ){
    list.onmouseover = function(){
        alert(index);
    };
}
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++ ){
    eventListener( lists[ i ] , i );
}

二：使用閉包十分容易造成瀏覽器的記憶體泄露，嚴重情況下會是瀏覽器掛死，感興趣的的話可以參考：http://www.cnblogs.com/rainman/archive/2009/03/07/1405624.html。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More