29-闭包引入_循环遍历加监听

现有需求：点击某个按钮, 提示"点击的是第n个按钮"

var btns = document.getElementsByTagName('button')

1.最菜的失败写法：

for (var i = 0; i < btns.length; i++) {
  var btn = btns[i]
  btn.onclick = function () {
    alert('第' + (i + 1) + '个')
  }
}

2.稍微聪明的写法：

for (var i = 0, length = btns.length; i < length; i++) {
/*
这里先用`length = btns.length`的原因是：
`btns.length`每次都需要进行计算，循环则会计算多次，先用变量保存，让它只计算一次
*/
  var btn = btns[i]
  // 将btn所对应的下标保存在btn上，因为万物皆对象，按钮也是对象，btn此时获取的是对象的引用
  btn.index = i
  btn.onclick = function () {
    alert('第' + (this.index + 1) + '个')
  }
}

3.利用闭包

for (var i = 0, length = btns.length; i < length; i++) {
  (function (j) {
    var btn = btns[j]
    btn.onclick = function () {
      alert('第' + (j + 1) + '个')
    }
  })(i)
}

这里暂不详细解释，等学完闭包回头再来看！