js常见问题之为什么点击弹出的i总是最后一个

  在前端群里看见过很多人问过这个问题，今晚又有人问了这个问题，所以写篇文章整理一下。首先看一下代码,点击li之后弹出当前li所对应的索引值。于是很多人刷刷刷写出了下面的代码。

var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++){
	aLi[i].onclick = function(){
		alert(i);
	}
}

  但是结果不尽人意，为了简单，我们约定一下页面中有2个li。点击li之后弹出的都是2。

  我们首先来分析一下为什么结果是1.我们可以简单的将循环分成两部。

  

i = 0时,aLi[0].onclick = function(){alert(i)}
i = 1时,aLi[1].onclick = function(){alert(i)}
i = 2时，不满足条件跳出循环.

 在执行click的函数的时候，会有一个作用域链，这个作用域链是一个对象列表，这组对象定义了代码作用域中的变量。（ 关于变量对象的内容想更详细了解的可以查看变量对象。）当我们alert(i)的时候，会去从内到外的去寻找变量i。这个时候这个函数的作用域链上有两个对象，这时循环已经结束了，i此时的值为2.所以点击任何一个li，弹出的都是2，而不是我们想要的索引值。重点在于弹出的是变量i，变量i，变量i。重要的事情说三遍。

 那么问题来了，我们要如何解决这个问题呢。我们需要做的就是在每次给aLi[i]绑定事件的时候，将这个时候i的值保存在内部的作用域中。解决方案如下。

 

var aLi = document.getElementsByTagName('li');

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

这里涉及到一个块级作用域的概念。在es6出来前，函数是作为创建块级作用域的主要手段。这里我们通过在aLi[i].onclick外面套上一层函数，将i作为参数，我们重新分析一下结果。
    i = 0时,
    (function(i){
      aLi[0].onclick = function(){
          alert(i);
      }
    })(0)
    i = 1时,
    (function(i){
      aLi[1].onclick = function(){
         alert(i);
      }
    })(1)
    i = 2时，不满足条件跳出循环.

由于多了一层自执行函数的包裹，当我们点击li时，会有三层的作用域，从内带外分别是：click函数内部的变量对象，自执行函数的变量对象和最外层的window对象。查找到第二层的时候，找到了i，自执行函数的i等于传入的参数值，相对应的存下了当时i的值，所以就弹出了相应的索引值。