[問題] 關於closure傳入的變數

看板Ajax作者 (別赤腳走路)時間12年前 (2013/01/06 01:00), 編輯推噓2(2013)
留言15則, 3人參與, 最新討論串1/1
在網路上看到一個例子, 但一直覺得很困惑, 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

01/06 02:12, , 1F
因為寫成i return 的fn會直接抓i的值 全部結果都會是
01/06 02:12, 1F

01/06 02:12, , 2F
alert(4)
01/06 02:12, 2F

01/06 02:13, , 3F
因為當你click的時候i會是4 num的作法是 當這個函式被
01/06 02:13, 3F

01/06 02:14, , 4F
onclick觸發的同時才會透過傳值建立 而傳進去的值在
01/06 02:14, 4F

01/06 02:15, , 5F
for-loop中透過存入onclick參考做暫存了 這裡的暫存因
01/06 02:15, 5F

01/06 02:15, , 6F
為不是使用參考 所以不會被i的改變所影響
01/06 02:15, 6F

01/06 02:16, , 7F
除了closure還有event-oriented的概念
01/06 02:16, 7F

01/06 02:18, , 8F
我昏了 integer是不會有參考問題 所以兩個寫法都可以
01/06 02:18, 8F

01/06 02:18, , 9F
但是這兩個寫法都太冗長 直接alert(i) 就好透過
01/06 02:18, 9F

01/06 02:19, , 10F
closure直接存起來 不需要傳值阿
01/06 02:19, 10F

01/06 02:29, , 11F
(function(num){..})(i)是宣告一個函數 接著立刻執行它
01/06 02:29, 11F

01/06 02:30, , 12F
num是 function的參數,i才是實際代入的值
01/06 02:30, 12F

01/06 02:31, , 13F
我覺得這樣比較清楚 http://jsfiddle.net/vanMv/
01/06 02:31, 13F

01/06 02:32, , 14F
但其實意思是一樣的
01/06 02:32, 14F

01/06 03:04, , 15F
感謝兩位大大回應,真的是鬼遮眼,沒看到self invoke
01/06 03:04, 15F
文章代碼(AID): #1Gw5mj7R (Ajax)
文章代碼(AID): #1Gw5mj7R (Ajax)