闭包初识

html

<button>测试1</button>
<button>测试2</button>
<button>测试3</button>

js

//错误
var btns = document.getElementsByTagName('button')
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = function() {//重点：事件回调函数：必须等到主线程的任务执行完毕，才能执行事件回调函数。
    console.log(this)
  }
}

//正确1
for (var i = 0; i < btns.length; i++) {
  btns[i].index = i;    //给每个按钮绑定一个自定义属性 index ，存住每个i
  btns[i].onclick = function() {
    console.log(this.index)
  }
}

//正确2：闭包解决
for (var i = 0; i < btns.length; i++) {
  //立即执行函数
  ;(function(i) { //此处i是形参
    btns[i].onclick = function() {
      console.log(i)
    }
  })(i) //此处i是实参
}