1. 程式人生 > >[js點滴]js函式與閉包函式詳解

[js點滴]js函式與閉包函式詳解

1、匿名函式

函式是JavaScript中最靈活的一種物件,這裡只是講解其匿名函式的用途。匿名函式:就是沒有函式名的函式。

1.1 函式的定義,首先簡單介紹一下函式的定義,大致可分為三種方式

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

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

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

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

第三種:

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

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

1.2 匿名函式的建立

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

第二種方式:

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

這裡建立了一個匿名函式(在第一個括號內),第二個括號用於呼叫該匿名函式,並傳入引數。

2、閉包

閉包的英文單詞是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才被釋放。

示例二,優化程式碼

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);   
 * }
 */

3、舉例

匿名函式最大的用途是建立閉包(這是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會彈出遞增的結果。

4、注意

4.1 閉包允許內層函式引用父函式中的變數,但是該變數是最終值

示例六:

/**
 * <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&rt;元素時,總是彈出4,而不是我們期待的元素下標。這是為什麼呢?注意事項裡已經講了(最終值)。顯然這種解釋過於簡單,當mouseover事件呼叫監聽函式時,首先在匿名函式( function(){ alert(i); })內部查詢是否定義了 i,結果是沒有定義;因此它會向上查詢,查詢結果是已經定義了,並且i的值是4(迴圈後的i值);所以,最終每次彈出的都是4。

解決方法一:

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

解決方法二:

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);    
    };
}

解決方法三:

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);
}

4.2 記憶體洩露

使用閉包十分容易造成瀏覽器的記憶體洩露,嚴重情況下會是瀏覽器掛死