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