作者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