js中没有块级作用域，例如for，if等，所以每次循环i的值都不会保留下来。

执行到最后，i=arr.length + 1，数组最大的index为arr.length -1，所以为undefined。

解决方法：
JS没有块级作用域，但有函数作用域，所以可以用立即执行函数，将每次的i传递进入函数作用域。如下面所写。

第一种方法：只修改for循环语句中的var为let

for(let i = 0; i < arr.length; i++){
    arr[i].onclick = function(){
      alert(i);
    }
}

第二种方法：自执行函数

for(var i = 0; i < arr.length; i++){
  function(k){
    arr[k].onclick = function(){
      alert(k);
    }
  }(i)
}

第三种方法：同第二种方法一样，使用自执行函数

for(var i = 0; i < arr.length; i++){
    arr[i].onclick = (function(k){
      alert(k);
    }
  })(i)
}

由于js异步机制，这个alert中的i参数会是循环结束之后的值，循环结束之后，i的值比add的长度大1，所以这个索引对应的项为undefined

基础闭包问题。

for(let i = 0; i < arr.length; i++){
  function(index){
    arr[index].onclick = function(){
      alert(index);
    }
  }(i)
}

自执行函数里边你没有给他传递参数，如果不传参数每次闭包里查找到的i值都是循环完的i值。i为循环完后的最大值，实际上i找不到这个选项所以为undefined。