循環(huán)和閉包

Cc_2011 發(fā)布于2019-08-22 17:10 / 1239人閱讀

摘要：所以所有函數(shù)共享一個的引用時，循環(huán)結(jié)構(gòu)讓我們誤認(rèn)為背后還有更復(fù)雜的機(jī)制在器作用，但實際上啥都木有，如果將延遲函數(shù)的回調(diào)重復(fù)定義五次，完全不使用循環(huán)，那他同這段代碼是完全等價的。

想要說明閉包，for循環(huán)是最常見的例子：

for(var i=1;i<=5;i++)
{
    setTimeout(function timer(){
        console.log(i);
    },i*1000);
}

以我們所想，我們可能認(rèn)為他會輸出1~5，每秒一次，每次一個。
但實際上，這段代碼在運行時會以每秒一次的頻率輸出五次6。

這是為什么？

原因是延遲函數(shù)會在循環(huán)結(jié)束時才執(zhí)行，事實上，當(dāng)定時器運行時即使每個迭代中執(zhí)行的是setTimeout(...,0),所有的回調(diào)函數(shù)依然是在循環(huán)結(jié)束后才會執(zhí)行，因此會每次輸出一個6出來。

根據(jù)作用域的原理，實際情況：盡管循環(huán)中的五個函數(shù)是在各個迭代中分別定義的，但是他們都被封閉在一個共享的全局作用域中，因此實際上只有一個i。
所以所有函數(shù)共享一個i的引用時，循環(huán)結(jié)構(gòu)讓我們誤認(rèn)為背后還有更復(fù)雜的機(jī)制在器作用，但實際上啥都木有，如果將延遲函數(shù)的回調(diào)重復(fù)定義五次，完全不使用循環(huán)，那他同這段代碼是完全等價的。

解決方法如下：
我們先試一下：

    for(var i=1;i<5;i++){
        (function(){
            setTimeout(function timer(){
                console.log(i);
            },i*1000);
        })();
    }

看似可以，但實際也沒用，雖然這樣寫我們有更多詞法作用域了，的確每個延遲函數(shù)都會將IIFE在每次迭代中創(chuàng)建的作用域封閉起來。
如果作用域是空的，那么僅僅將他們進(jìn)行封閉是不夠的。仔細(xì)看一下，我們的IIFE只是一個什么都沒有的空作用域，所以需要包含一點實際內(nèi)容為我們所用。

他需要自己的變量，用來在每個迭代中存儲i的值：

    for(var i=0;i<=5;i++)
    {
        (function(){
            var j=i;
            setTimeout(function timer(){
                console.log(j);
            },j*1000);
        })();
    }

ok,他運行如我們所愿了！

可以進(jìn)行改進(jìn)：

    for(var i=1;i<=5;i++)
    {
        (function{
            setTimeout(function timer(){
                console.log(j);
            },j*1000);
        })(i);    //i可以改動，只要你喜歡
    }

在迭代內(nèi)使用IIFE會為每個迭代都生成一個新的作用域，使得延遲函數(shù)的回調(diào)可以將新的作用域封閉在每個迭代內(nèi)部，每個迭代中都會包含一個具有正確值的變量供我們訪問。

使用let解決

for循環(huán)的let聲明還會有一個特殊行為，這個行為之處變量在循環(huán)過程中不知被聲明一次，每次迭代都會聲明，隨后的每個迭代都會使用上一個迭代結(jié)束時的值來初始化這個變量。

    for(var i=1;i<=5;i++)
    {
        let j=i;  //閉包
        setTimeout(function timer(){
            console.log(j);
        },j*1000);
    }
    
    下面是進(jìn)化版
    
    for(let i;i<=5;i++)
    {
        setTimeout(function timer(){
            console.log(i);
        },i*1000);
    }