第一次接觸閉包,是在一個(gè)小DEMO里面,當(dāng)時(shí)給我留下來的印象是术辐,閉包本來是不存在的术吗,我們要人為的去創(chuàng)造,現(xiàn)在又一次接觸到隘蝎,才發(fā)現(xiàn)原來的認(rèn)知是錯(cuò)誤的嘱么,閉包無處不在几迄,有時(shí)候我們需要去避免,有時(shí)候需要去利用解孙;
那么就從一個(gè)經(jīng)典的例子開始:
<div class="wrap">
<button>click</button>
<button>click</button>
<button>click</button>
<button>click</button>
</div>
<script type = 'text/javascript'>
var btns = $('button');
for(var i=0;i<btns.length;i++) {
btns[i].onclick = function set(){
console.log(i);
};
}
</script>
本來想著,按幾輸出幾的下標(biāo)廷臼,寫完出來中剩,完全不是
當(dāng)時(shí),我的理解就是:外面的循環(huán)太快,導(dǎo)致里面綁定還沒來得及属铁,等去賦值的時(shí)候焦蘑,i已經(jīng)沖到了4,于是乎就變成了都輸出4拼卵;
現(xiàn)在想想,要真是這樣即寡,btns[i]這個(gè)onclick那就綁定到4上去了实柠,根本就沒有btns[4]草则,綁定毛線炕横;
現(xiàn)在弄清楚了膜钓,在綁定的時(shí)候,確實(shí)i是跟著for循環(huán)再一個(gè)一個(gè)綁定沃疮,但是綁定的事件根本都沒觸發(fā)姨蝴,里面的btns[i]根本沒去要i的值授帕,給btns[0]~btns[3]綁定的只是光禿禿的console.log(i)
,最后觸發(fā)的時(shí)候炒辉,i已經(jīng)變成了4豪墅,故就變成了上面這個(gè)樣子;
相比上次黔寇,對原因一知半解甚至還有錯(cuò)的偶器,現(xiàn)在理解稍微深刻一點(diǎn)了,這次知道如何修復(fù),達(dá)成目的:
var btns = $('button');
for(var i=0;i<btns.length;i++) {
bind(i);
}
function bind(num){
btns[num].onclick = function set(){
console.log(num);
};
}
這個(gè)是用閉包解決了屏轰,分別創(chuàng)建不同的閉包颊郎,并且每個(gè)相互不影響,來馬上保存記錄當(dāng)時(shí)的數(shù)字霎苗;
當(dāng)然現(xiàn)在還有一個(gè)另外的方法姆吭,關(guān)鍵是一個(gè)馬上保存,并且保存下來相互不干擾唁盏;
var btns = $('button');
for(var i=0;i<btns.length;i++) {
btns[i].val = i;
btns[i].onclick = function () {
console.log(this.val);
};
}
將i綁定到每個(gè)按鈕身上内狸,并且利用前幾天接給我?guī)頍赖膖his;