javascript中閉包的一些理解

lansheng228 發(fā)布于2019-08-20 14:46 / 1054人閱讀

摘要：眾所周知，閉包的一個(gè)作用就是讓一些變量始終保持在內(nèi)存中，在此我用一些實(shí)際代碼對(duì)這句話作進(jìn)一步的理解。輸出這個(gè)很好理解，不多說(shuō)輸出輸出上述代碼中，就是執(zhí)行函數(shù)返回的匿名函數(shù)。

閉包是javascript中繞不開(kāi)的話題，關(guān)于閉包的一些概念和應(yīng)用，這方面資料比較多，在此就不再贅述。眾所周知，閉包的一個(gè)作用就是讓一些變量始終保持在內(nèi)存中，在此我用一些實(shí)際代碼對(duì)這句話作進(jìn)一步的理解。

demo1:
    function closure(){
      var n = 0;
      function test() {
        console.log(++n);
      }
      test() 
      test() 
    }
    closure(); //輸出1,2（這個(gè)很好理解，不多說(shuō)）

demo2:
    function test(){
        var i=0;
        return function(){
            console.log(i++);
        }
        }
        var fn = test();
        fn(); //輸出0
        fn(); //輸出1

上述代碼中，fn就是執(zhí)行函數(shù)test()返回的匿名函數(shù)。由于fn又是一個(gè)全局變量，生命周期一直存在，且這個(gè)匿名函數(shù)引用了父函數(shù)test里面的一個(gè)局部變量，所以變量i的狀態(tài)會(huì)被一直保存.

demo3:
    function test(){
        var i=0;
        return function(){
            console.log(i++);
        }
    }
    test()(); //輸出0
    test()(); //輸出0

上述代碼中，執(zhí)行test()返回的是其內(nèi)部的匿名函數(shù)，但是執(zhí)行完test()()以后，該匿名函數(shù)的生命周期已經(jīng)結(jié)束，所以變量i的狀態(tài)沒(méi)有得到保存。

最近在簡(jiǎn)書(shū)上讀到一篇有趣的文章，其中一些代碼如下：

for (var i = 0; i < 5; i++) {
 setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}   //輸出0，1,2,3,4

上述代碼中有一個(gè)setTimeout()函數(shù)，其使用格式為setTimeout(func,time),意思是至少過(guò)time時(shí)間后，執(zhí)行func。有了這樣的認(rèn)識(shí)后，我們可以把func等價(jià)成：
(function(i){console.log(i)})(i)這個(gè)自執(zhí)行函數(shù)。所以這個(gè)事情分兩步，首先每次循環(huán)自執(zhí)行函數(shù)肯定會(huì)立即執(zhí)行一次，會(huì)依次輸出1,2,3,4。其次，每過(guò)time時(shí)間，執(zhí)行一次func，但是在上述代碼中，func等價(jià)于一個(gè)立即執(zhí)行函數(shù)，沒(méi)有返回值，故什么也不會(huì)做。
如果把上述代碼改成這樣：

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

上述代碼會(huì)依次輸出0，1,2,3,4， 7,8,9,10,11(結(jié)合這個(gè)例子理解上一個(gè)問(wèn)題，就容易多了)

如果把上面的代碼改成這樣呢？

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

運(yùn)行上面的代碼會(huì)輸出5個(gè)5（這一點(diǎn)現(xiàn)在可以理解了吧），有人不解的是為什么是每隔一秒輸出5而不是隔五秒輸出5。setTimeout(func,time)這個(gè)函數(shù)延遲執(zhí)行的只是func里面的動(dòng)作，而time的值是不存在延遲的。上面執(zhí)行for循環(huán)，相當(dāng)于：setTimeout(func,1000)，setTimeout(func,2000) .... 第一次setTimeout執(zhí)行的時(shí)候等了一秒（準(zhǔn)確地說(shuō)，至少要等一秒），第二次setTimeout執(zhí)行的時(shí)候等2秒，但是前面第一次執(zhí)行的setTimeout函數(shù)時(shí)，已經(jīng)等了一秒，所以只需再等一秒就可以立即執(zhí)行了。在這里，需要弄明白的是，setTimeout函數(shù)延遲執(zhí)行的時(shí)間，起點(diǎn)是從time開(kāi)始賦值的時(shí)候計(jì)算的，不是從上一個(gè)setTimeout函數(shù)執(zhí)行完開(kāi)始算的。