425      技術社區[雲棲]

Javascript的匿名函數與自執行

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

函數分幾種

函數的定義，大致可分為三種方式：

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

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

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

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

第三種：

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

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

匿名函數的創建

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

第二種方式：

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

這裏創建了一個匿名函數(在第一個括號內)，第二個括號用於調用該匿名函數，並傳入參數。括號是表達式，是表達式就有返回值，所以可以在後麵加一對括號讓它們執行

var a = 1;  
var b = 2;  
(function(){  
    var b = 3;  
    a += b;  
})();  
alert(a); // 4  
alert(b); // 2  

自執行的匿名函數

自執行的匿名函數是指形如這樣的函數:

(function {// code})();

為什麼(function {// code})();可以被執行, 而function {// code}();卻會報錯?

1. 首先, 要清楚兩者的區別:(function {// code})是表達式, function {// code}是函數聲明.

2. 其次, js"預編譯"的特點:js在"預編譯"階段, 會解釋函數聲明, 但卻會忽略表式.

3. 當js執行到function() {//code}();時, 由於function() {//code}在"預編譯"階段已經被解釋過, js會跳過function{//code}, 試圖去執行();, 故會報錯;當js執行到(function {// code})();時, 由於(function {// code})是表達式, js會去對它求解得到返回值, 由於返回值是一個函數, 故而遇到();時, 便會被執行。另外， 函數轉換為表達式的方法並不一定要靠分組操作符()，我們還可以用void操作符，~操作符，!操作符……

function foo() { foo(); }   // 這是一個自執行的函數，函數內部執行自身，遞歸

var foo = function () { arguments.callee(); };   // 這是一個自執行的匿名函數，因為沒有標示名稱,必須使用arguments.callee屬性來執行自己

var foo = function () { foo(); };   // 這可能也是一個自執行的匿名函數，僅僅是foo標示名稱引用它自身。如果你將foo改變成其它的，你將得到一個used-to-self-execute匿名函數

(function () { /* code */ } ());   // 有些人叫這個是自執行的匿名函數（即便它不是），因為它沒有調用自身，它隻是立即執行而已

(function foo() { /* code */ } ());   // 為函數表達式添加一個標示名稱，可以方便Debug。但一定命名了，這個函數就不再是匿名的了

(function () { arguments.callee(); } ());
(function foo() { foo(); } ());   // 立即調用的函數表達式（IIFE）也可以自執行，不過可能不常用罷了

匿名函數與閉包

閉包的英文單詞是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);     
} */

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

注意：

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

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

會發現當鼠標移過每一個

解決方法一：

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

2 內存泄露

使用閉包十分容易造成瀏覽器的內存泄露，嚴重情況下會是瀏覽器掛死

最後更新：2017-06-16 14:32:18

  上一篇：  阿裏雲智能圖像識別服務發布

  下一篇：  文科生也能搞定的深度學習入門漫畫！（下）