考慮下面代碼：

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?就會調用時傳進來的的當時值，這樣在點擊元素時，就能顯示正確的序號。

作者：王大冶
鏈接：https://juejin.cn/post/7161959592967012366