JavaScript之閉包與立即執(zhí)行函數(shù)

Scorpion 發(fā)布于2019-08-23 12:35 / 2321人閱讀

摘要：閉包與立即執(zhí)行函數(shù)前言最近在細(xì)讀高級(jí)程序設(shè)計(jì)，對(duì)于我而言，中文版，書中很多地方翻譯的差強(qiáng)人意，所以用自己所理解的，嘗試解讀下。作用域鏈的這種配置機(jī)制引出了一個(gè)值得注意的副作用，即閉包只能取得包含任何變量的最后一個(gè)值。

閉包與立即執(zhí)行函數(shù)

前言：最近在細(xì)讀Javascript高級(jí)程序設(shè)計(jì)，對(duì)于我而言，中文版，書中很多地方翻譯的差強(qiáng)人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯(cuò)誤，會(huì)非常感謝您的指出。文中絕大部分內(nèi)容引用自《JavaScript高級(jí)程序設(shè)計(jì)第三版》。

作用域鏈的這種配置機(jī)制引出了一個(gè)值得注意的副作用，即閉包只能取得包含任何變量的最后一個(gè)值。

function createArray(){

    var result = new Array();

    for(var i = 0; i < 10; i++) {
        result[i] = function() {
            return i;
        }
    }

    return result;
}

這個(gè)函數(shù)會(huì)返回一個(gè)函數(shù)數(shù)組。表面上看，似乎每個(gè)函數(shù)都應(yīng)該返回自己的索引值，即位置0的函數(shù)返回0，位置1的函數(shù)返回1，以此類推。

但實(shí)際上，每個(gè)函數(shù)都返回10，因?yàn)槊總€(gè)函數(shù)的作用域中都保存著createArray的活動(dòng)對(duì)象，所以他們引用的都是同一個(gè)變量i。

當(dāng)createArray()函數(shù)返回后，變量i的值是10，此時(shí)每個(gè)函數(shù)都引用著同一個(gè)變量i，所以i的值是10。

// 代碼執(zhí)行過程

createArray();

/*
createArray() {
    var result = new Array();

    var i; // 0,1,2,3,4,5,6,7,8,9,10

    for ( i = 0; i < 10 ; i ++) {
        result[i] = function() {
            return i; 
            // 注意 函數(shù)的執(zhí)行時(shí)機(jī)，你只有調(diào)用函數(shù)的時(shí)候，才會(huì)產(chǎn)生執(zhí)行環(huán)境，沿著作用域鏈，找到活動(dòng)對(duì)象
            // 這里有個(gè)閉包，還記得閉包的概念嗎？ 有權(quán)訪問到另外一個(gè)函數(shù)作用域的變量的函數(shù)
        }
    }
    
    /*
    result[0] = function(){
        return i
    }
    result[1] = function(){
        return i
    }
    result[2] = function(){
        return i
    }
    ....
    */
    return result;
}

result = [function(){return i}, function(){return i}....];

*/

createArray()[1](); // 10

那么如何讓這個(gè)函數(shù)的行為符合我們的預(yù)期呢？

可以通過創(chuàng)建另一個(gè)匿名函數(shù)強(qiáng)制讓閉包的行為符合預(yù)期，這里也應(yīng)用了立即執(zhí)行函數(shù)。

//立即執(zhí)行函數(shù)
//我們平時(shí)寫函數(shù)然后調(diào)用是這么寫的。
//聲明函數(shù)，調(diào)用執(zhí)行。

function foo(){
    console.log("hi");
}

foo(); // "hi"

//那么，我們可不可以聲明調(diào)用寫一塊呢？ 這就是申明函數(shù)立刻執(zhí)行。
//好像不可以，控制臺(tái)報(bào)錯(cuò)

function foo(){
    console.log("hi");
}(); //Uncaught SyntaxError: Unexpected token )


//那么如果用括號(hào)包裹呢？

(function foo(){
    console.log("hi");
}()); // "hi"， 可以了。 這就是立即執(zhí)行函數(shù)！

有了立即執(zhí)行函數(shù)，就可以強(qiáng)制讓閉包的行為符合我們的預(yù)期了。

//改寫代碼

function createArray() {

    var result = new Array();

    for( var i = 0; i < 10; i ++ ) {
        result[i] = (function(i) { 
            return function(){
                return i;
            }
        }(i));
    }

    return result;

}

createArray()[0](); // 0
createArray()[1](); // 1
createArray()[2](); // 2 

// 這里不只有一種方法，其他方法在此不表。