closure 閉包(1)

2019 iT 邦幫忙鐵人賽

DAY 19

Modern Web

一步一腳印-紮紮實實學es6系列第 19 篇

2019鐵人賽

Paul.Ciou

2018-10-19 23:59:43

1312 瀏覽

分享至

MSDN ：

閉包（Closure）是函式的組合，以及該宣告函式所包含的作用域環境（lexical environment）。
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Closures

相信大家多多少少有學過FP(functional programming)
但這個在詭譎的javascript 中又是如何使用的呢?
趕快來學習一下javascript 的FP吧

在FP 中，必需要有子函數與父函數的存在

什麼是父函數與子函數呢?
我們直接看例子來說

在loop中得到對應的索引

在這個例子中，我們藉由FP 來得到每個點擊的index

<html>
    <body>
        <ul>
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
        </ul>
    </body>
</html>

const liList=document.querySelectorAll("li");
for(var i=0;i<liList.length;i++){
  (
    function(i){
      liList[i].onclick=function(){
        console.log(i);
      };
      
    } 
  )(i);
}

codepen
在這邊透過for loop 去給每一個li 項目去算一個索引值
經由即刻調用函式去計算每個li 的事件
應該賦與什麼樣的function
在使用者 onclick 的時候會回傳一個子函數function(){console.log(i)}
這個子函數並沒有變數i
這個i 是來自父函數的i
由於父函數的i 給他值，所以可以賦與子函數不同的i值
經由這個例子可以讓我們很容易的感覺到閉包的一點好處

好了不能免俗的
我們對閉包會有點疑問
考慮以下例子

var FatherFunc=()=>{
    var n=10;
    var sonFunc=()=>{
        n++;
        console.log(n);
    }
	return sonFunc;
}
var kk=FatherFunc();
kk();
kk();

我們會發現一個奇怪現象
明明n 是在FatherFunc 裡面的區域變數
應該執行完kk() 就會被垃圾回收機制回收
應該執行2次都是11

但是為什麼還能繼續暫存呢?