MSDN :
閉包(Closure)是函式的組合,以及該宣告函式所包含的作用域環境(lexical environment)。
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Closures
相信大家多多少少有學過FP(functional programming)
但這個在詭譎的javascript 中又是如何使用的呢?
趕快來學習一下javascript 的FP吧
在FP 中,必需要有子函數與父函數的存在
什麼是父函數與子函數呢?
我們直接看例子來說
在這個例子中,我們藉由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
但是為什麼還能繼續暫存呢?
這個問題,能回答的就不用看下一篇
不能回答的,咱明天分曉