javascript
JavaScript中的匿名函数及函数的闭包
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); }?
總結
以上是生活随笔為你收集整理的JavaScript中的匿名函数及函数的闭包的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 全民健身进部队好吗
- 下一篇： JavaScript 变量的生存期