首頁 > web前端 > js教程 > 詳談JavaScript函數閉包使用及注意事項程式碼詳解

詳談JavaScript函數閉包使用及注意事項程式碼詳解

伊谢尔伦
發布: 2017-07-25 15:04:27
原創
1368 人瀏覽過

閉包的英文單字是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;
})();
登入後複製

範例四:

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會彈出遞增的結果。

注意:閉包允許內層函數引用父函數中的變量,但是該變量是最終值

示例六:

/**
 * <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);    
    };
}
登入後複製

你會發現當滑鼠移過每一個

解決方法一:

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);
}
登入後複製

以上是詳談JavaScript函數閉包使用及注意事項程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板