Rising Sun

            BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理 ::
            148 隨筆 :: 0 文章 :: 22 評論 :: 0 Trackbacks

          1、匿名函數(shù)

          函數(shù)是JavaScript中最靈活的一種對象,這里只是講解其匿名函數(shù)的用途。匿名函數(shù):就是沒有函數(shù)名的函數(shù)。

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

          第一種:這也是最常規(guī)的一種

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

          第二種:這種方法使用了Function構(gòu)造函數(shù),把參數(shù)列表和函數(shù)體都作為字符串,很不方便,不建議使用。

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

          第三種:

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

          注意“=”右邊的函數(shù)就是一個(gè)匿名函數(shù),創(chuàng)造完畢函數(shù)后,又將該函數(shù)賦給了變量square。

          1.2 匿名函數(shù)的創(chuàng)建

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

          第二種方式:

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

          這里創(chuàng)建了一個(gè)匿名函數(shù)(在第一個(gè)括號內(nèi)),第二個(gè)括號用于調(diào)用該匿名函數(shù),并傳入?yún)?shù)。

          2、閉包

          閉包的英文單詞是closure,這是JavaScript中非常重要的一部分知識(shí),因?yàn)槭褂瞄]包可以大大減少我們的代碼量,使我們的代碼看上去更加清晰等等,總之功能十分強(qiáng)大。

          閉包的含義:閉包說白了就是函數(shù)的嵌套,內(nèi)層的函數(shù)可以使用外層函數(shù)的所有變量,即使外層函數(shù)已經(jīng)執(zhí)行完畢(這點(diǎn)涉及JavaScript作用域鏈)。

          示例一

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

          這個(gè)例子看上去十分的簡單,仔細(xì)分析下它的執(zhí)行過程還是有許多知識(shí)點(diǎn)的:checkClosure函數(shù)的執(zhí)行是瞬間的(也許用時(shí)只是0.00001毫秒),在checkClosure的函數(shù)體內(nèi)創(chuàng)建了一個(gè)變量str,在checkClosure執(zhí)行完畢之后str并沒有被釋放,這是因?yàn)閟etTimeout內(nèi)的匿名函數(shù)存在這對str的引用。待到2秒后函數(shù)體內(nèi)的匿名函數(shù)被執(zhí)行完畢,str才被釋放。

          示例二,優(yōu)化代碼

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

          3、舉例

          匿名函數(shù)最大的用途是創(chuàng)建閉包(這是JavaScript語言的特性之一),并且還可以構(gòu)建命名空間,以減少全局變量的使用。

          示例三:

          var oEvent = {}; (function(){      var addEvent = function(){ /*代碼的實(shí)現(xiàn)省略了*/ };     function removeEvent(){}      oEvent.addEvent = addEvent;     oEvent.removeEvent = removeEvent; })(); 

          在這段代碼中函數(shù)addEvent和removeEvent都是局部變量,但我們可以通過全局變量oEvent使用它,這就大大減少了全局變量的使用,增強(qiáng)了網(wǎng)頁的安全性。 我們要想使用此段代碼:oEvent.addEvent(document.getElementById('box') , 'click' , function(){});

          示例四:

          var rainman = (function(x , y){     return x + y; })(2 , 3); /**  * 也可以寫成下面的形式,因?yàn)榈谝粋€(gè)括號只是幫助我們閱讀,但是不推薦使用下面這種書寫格式。  * var rainman = function(x , y){  *    return x + y;  * }(2 , 3);  */ 

          在這里我們創(chuàng)建了一個(gè)變量rainman,并通過直接調(diào)用匿名函數(shù)初始化為5,這種小技巧有時(shí)十分實(shí)用。

          示例五:

          var outer = null;  (function(){     var one = 1;     function inner (){         one += 1;         alert(one);     }     outer = inner; })();  outer();    //2 outer();    //3 outer();    //4 

          這段代碼中的變量one是一個(gè)局部變量(因?yàn)樗欢x在一個(gè)函數(shù)之內(nèi)),因此外部是不可以訪問的。但是這里我們創(chuàng)建了inner函數(shù),inner函數(shù)是可以訪問變量one的;又將全局變量outer引用了inner,所以三次調(diào)用outer會(huì)彈出遞增的結(jié)果。

          4、注意

          4.1 閉包允許內(nèi)層函數(shù)引用父函數(shù)中的變量,但是該變量是最終值

          示例六:

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

          你會(huì)發(fā)現(xiàn)當(dāng)鼠標(biāo)移過每一個(gè)<li&rt;元素時(shí),總是彈出4,而不是我們期待的元素下標(biāo)。這是為什么呢?注意事項(xiàng)里已經(jīng)講了(最終值)。顯然這種解釋過于簡單,當(dāng)mouseover事件調(diào)用監(jiān)聽函數(shù)時(shí),首先在匿名函數(shù)( function(){ alert(i); })內(nèi)部查找是否定義了 i,結(jié)果是沒有定義;因此它會(huì)向上查找,查找結(jié)果是已經(jīng)定義了,并且i的值是4(循環(huán)后的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屬性記錄下標(biāo)     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 內(nèi)存泄露

          使用閉包十分容易造成瀏覽器的內(nèi)存泄露,嚴(yán)重情況下會(huì)是瀏覽器掛死,感興趣的的話可以參考:http://www.cnblogs.com/rainman/archive/2009/03/07/1405624.html

          http://www.cnblogs.com/rainman/archive/2009/05/04/1448899.html

          posted on 2013-03-20 10:00 brock 閱讀(228) 評論(0)  編輯  收藏 所屬分類: javascript
          主站蜘蛛池模板: 镇远县| 永寿县| 报价| 大关县| 环江| 丰县| 勃利县| 微山县| 朔州市| 庆云县| 固原市| 元朗区| 岗巴县| 喀什市| 秦皇岛市| 张家口市| 家居| 清徐县| 贵南县| 昭觉县| 重庆市| 东平县| 安泽县| 吉木萨尔县| 如皋市| 延川县| 石阡县| 利津县| 武安市| 麻城市| 淮滨县| 宁晋县| 上杭县| 洛川县| 嘉定区| 赣州市| 青冈县| 南靖县| 新郑市| 上思县| 奇台县|