iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
0
Modern Web

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

closure 閉包(1)

  • 分享至 

  • xImage
  •  

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
https://ithelp.ithome.com.tw/upload/images/20181020/2011057942bx3A7IpH.png
但是為什麼還能繼續暫存呢?

這個問題,能回答的就不用看下一篇

不能回答的,咱明天分曉


上一篇
函數(7) apply()
下一篇
閉包(2) 執行環境的現象
系列文
一步一腳印-紮紮實實學es630
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
deh
iT邦研究生 1 級 ‧ 2019-12-31 11:32:44

看了看,前面提到的惰性函數本質上就是閉包呀!

我要留言

立即登入留言