考虑下面代码:
var elements = document.getElementsByTagName('input');
var n = elements.length; // Assume we have 10 elements for this example
for (var i = 0; i < n; i++) {
elements[i].onclick = function() {
console.log("This is element #" + i);
};
}
根据上面的代码,如果有10
个 input
元素,点击任何一个都会显示 "This is element #10"
。 这是因为,当任何一个元素的onclick
被调用时,上面的for
循环已经结束,i
的值已经是10
了(对于所有的元素)。
我们可以像下面这样来解决这个问题:
var elements = document.getElementsByTagName('input');
var n = elements.length;
var makeHandler = function(num) {
return function() {
console.log("This is element #" + num);
};
};
for (var i = 0; i < n; i++) {
elements[i].onclick = makeHandler(i+1);
}
makeHandler
?是一个外部函数,并返回一个内部函数,这样就会形成一个闭包,num
?就会调用时传进来的的当时值,这样在点击元素时,就能显示正确的序号。