首頁 > web前端 > js教程 > 主體

Javascript的匿名函數與自執行

高洛峰
發布: 2016-10-13 10:21:31
原創
1023 人瀏覽過

函數的定義,大致可分為三種方式:

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

function double(x){    
    return 2 * x;       
}
登入後複製

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

var double = new Function('x', 'return 2 * x;');
登入後複製

第三種:

var double = function(x) { return 2* x; }
登入後複製

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

匿名函數的創建

 

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

第二種方式:

(function(x, y){   
    alert(x + y);     
})(2, 3);
登入後複製

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

 

 

自執行的匿名函數

 

?
    它是指形如這樣的函數: (function {// code})();

    2. 疑問
    為什麼(function {// code})(); ();卻會錯誤?

    3. 分析
    (1)., 要清楚兩者的差異:
    (function {// codeunc})是表達式, f    (function {// codeunc})是表達式, f    (function {// codeunc})是表達式, ftion {//code 是函數宣告//code. (2). 其次, js"預編譯"的特點:
    js在"預編譯"階段, 會解釋函數宣告, 但卻會忽略表式.
    (3). 當js執行到function() {// code}();時, 由於function() {//code}在"預編譯"階段已經被解釋過, js會跳過function(){//code}, 試圖去執行();, 故會報錯;
    當js執行到(function {// code})();時, 由於(function {// code})是表達式, js會去對它求解得到返回值, 由於返回值是一個函數, 故而遇到();時, 會被執行.

   另外, 函數轉換為表達式的方法不一定要靠分組運算符(),我們也可以用void運算符,~運算符,!運算子… …

如:

!function(){   
  alert("另类的匿名函数自执行");   
}();
登入後複製

匿名函數與閉包

 

閉包的英文單字是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 閉包允許內層函數引用父函數中的變量,但是該變量是最終值

/**  
 * <body>  
 * <ul>  
 *     <li>one</li>  
 *     <li>two</li>  
 *     <li>three</li>  
 *     <li>one</li>  
 * </ul>  
 */
     
var lists = document.getElementsByTagName(&#39;li&#39;);  
for(var i = 0 , len = lists.length ; i < len ; i++){  
    lists[ i ].onmouseover = function(){  
        alert(i);      
    };  
}
登入後複製

你會發現當鼠標

4,而不是我們期待的元素下標。這是為什麼呢?注意事項裡已經講了(最終值)。顯然這種解釋過於簡單,當mouseover事件調用監聽函數時,首先在匿名函數( function(){ alert(i); })內部查找是否定義了i,結果是沒有定義;因此它會向上查找,查找結果是已經定義了,而且i的值是4(循環後的i值);所以,最後每次彈出的都是4。

  • 解決方法一:

    var lists = document.getElementsByTagName(&#39;li&#39;);  
    for(var i = 0 , len = lists.length ; i < len ; i++){  
        (function(index){  
            lists[ index ].onmouseover = function(){  
                alert(index);      
            };                      
        })(i);  
    }
    登入後複製

    解決方法二:

    var lists = document.getElementsByTagName(&#39;li&#39;);  
    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(&#39;li&#39;);  
    for(var i = 0 , len = lists.length ; i < len ; i++){  
        eventListener(lists[ i ] , i);  
    }
    登入後複製
    2 內存洩露

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

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


    🎜
  • 來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!