Js匿名函式小指南

關於匿名函式看似複雜，其實不然，今天我們就來談談關於JS匿名函式的那些小事兒，把看起來高深的匿名函式簡單化。

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

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

第一種：這也是最常規的一種 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、注意 閉包允許內層函式引用父函式中的變數，但是該變數是最終值

示例六： /** * *

*
• one
*
• two
*
• three
*
• one
*

*/

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

本文為Anyforweb技術分享部落格，需要了解網站建設相關，請訪問anyforweb.com。