作者sabiya (別赤腳走路)
看板Ajax
標題[問題] 關於closure傳入的變數
時間Sun Jan 6 01:00:22 2013
在網路上看到一個例子，
但一直覺得很困惑，
function addLinks () {
for (var i=0, link; i<5; i++) {
link = document.createElement("a");
link.innerHTML = "Link " + i;
link.onclick = function (num) {
return function () {
alert(num);
};
}(i);
document.body.appendChild(link);
}
}
window.onload = addLinks;
為何onclick的觸發函式是宣告成：
function(num) {
return function() {
alert(num);
}
}
但實際上觸發時，並不會代入任何參數，
而且num沒被宣告過，alert時應該是沒有東西？
為何不是寫成如下：
function(i) {
return function() {
alert(i);
}
}
但實際測試的結果，兩者結果都是相同的，
會利用closure的特性，將當下的i暫存起來，
今晚想破頭就是為這題 冏rz
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 1.173.227.21
1F：推 Fantasywind:因為寫成i return 的fn會直接抓i的值 全部結果都會是 01/06 02:12
2F：→ Fantasywind:alert(4) 01/06 02:12
3F：→ Fantasywind:因為當你click的時候i會是4 num的作法是 當這個函式被 01/06 02:13
4F：→ Fantasywind:onclick觸發的同時才會透過傳值建立 而傳進去的值在 01/06 02:14
5F：→ Fantasywind:for-loop中透過存入onclick參考做暫存了 這裡的暫存因 01/06 02:15
6F：→ Fantasywind:為不是使用參考 所以不會被i的改變所影響 01/06 02:15
7F：→ Fantasywind:除了closure還有event-oriented的概念 01/06 02:16
8F：→ Fantasywind:我昏了 integer是不會有參考問題 所以兩個寫法都可以 01/06 02:18
9F：→ Fantasywind:但是這兩個寫法都太冗長 直接alert(i) 就好透過 01/06 02:18
10F：→ Fantasywind:closure直接存起來 不需要傳值阿 01/06 02:19
11F：→ grence:(function(num){..})(i)是宣告一個函數 接著立刻執行它 01/06 02:29
12F：→ grence:num是 function的參數，i才是實際代入的值 01/06 02:30
14F：→ Fantasywind:但其實意思是一樣的 01/06 02:32
15F：→ sabiya:感謝兩位大大回應，真的是鬼遮眼,沒看到self invoke 01/06 03:04