JS常见问题:为什么点击弹出的我总是最后一个？

我在前端群看到很多人问这个问题，今晚又有一个人问这个问题，所以写一篇文章整理一下。先看代码，点击li，会弹出当前li对应的索引值。所以很多人刷写下面的代码。

var AlI=document . getelementsbytagname(' Li ')；for(var I=0；i aLi.lengthi ){ aLi[i]。onclick=function(){ alert(I)；}}但结果并不令人满意。为了简单起见，我们同意页面上有2 li。点击li后，弹出2。我们来分析一下为什么结果是1。我们可以简单地把循环分成两部分。

当i=0时，阿里[0]。onclick=function(){ alert(I)} I=1，Ali [1]。onclick=function(){ alert(I)} I=2，循环跳出不满足条件。执行click函数时，会有一个作用域链，就是作用域链。(如果想了解变量对象的更多内容，可以查看变量对象。当我们提醒(I)时，我们将从内到外寻找变量I。此时这个函数的作用域链上有两个对象，循环已经结束，此时I的值为2。因此，如果您单击任何li，将弹出2，而不是我们想要的索引值。关键是变量I，变量I，变量I弹出。重要的事情说三遍。

那么问题来了，怎么解决呢？我们需要做的是，每次将事件绑定到aLi[i]时，将I的值保存在内部范围内。解决方法如下。

var AlI=document . getelementsbytagname(' Li ')；for(var I=0；i aLi.lengthi ) {(函数(i){ aLi[i])。onclick=function(){ alert(I)；};})(i)}这涉及到块级范围的概念。在es6问世之前，函数是创建块级范围的主要手段。这里，我们在aLi[i]之外放了一层函数。onclick，以I为参数，我们重新分析结果。

I=0，(函数(I) {Ali [0]。onclick=function(){ alert(I)；}}) (0)当I=1时，(函数(I) {Ali [1]。onclick=function(){ alert(I)；}}) (1)如果I=2，则不满足条件时循环跳出。因为有一层额外的自执行函数包，当我们点击li时，会有三层作用域，分别是点击函数内部的变量对象、自执行函数的变量对象和最外层的窗口对象。找到第二层的时候就找到了，自动执行函数的I等于传入的参数值，保存了当时I的对应值，所以弹出了对应的索引值。

让我们分享一个常见的js问题，并实现点击李灿弹出当前的li索引和innerHTML函数。

单击其中一个需要警报才能给出以下结果：

按照我们通常的想法，代码应该这样写：

var myul=document . getelementsbytagname(' ul ')[0]；var list=myul . getelementsbytagname(' Li ')；function foo(){ for(var i=0，len=list.length我透镜；i ){ list[i]。onclick=function(){ alert(I '-' this . innerhtml)；} } } foo()；但不幸的是，结果如下：

为什么指数总是4？这是因为js中没有块级别的作用域。这里有三种解决方案。

1.使用闭包。

脚本类型=' text/JavaScript ' var myul=document . getelementsbytagname(' ul ')[0]；var list=myul . getelementsbytagname(' Li ')；function foo(){ for(var i=0，len=list.length我透镜；I){ var=list[I]；清单[i]。onclick=(function(k){ var info=that . innerhtml；return function(){ alert(k '-' info)；};})(I)；} } foo()；/script2。使用ES6中的新特性let声明变量。

用let声明的变量将有一个块级别的作用域，这显然符合要求，但需要注意的是，一个“使用严格”(使用严格模式)将生效。

脚本类型=' text/JavaScript ' var myul=document。getelementsbytagname(' ul ')[0]；var list=myul。getelementsbytagname(' Li ')；function foo(){ '对(让i=0，len=list.length我透镜；i ){ list[i].onclick=function(){ alert(I '-' this。innerhtml)；} } } foo()；/script3 .引入jquery，使用其中的在或代表进行事件绑定（它们都有事件代理的特性)

脚本类型=' text/JAVAScript ' src=' http : jquery-1。8 .2 .量滴js '/脚本脚本类型='text/javascript'$('ul ').委托(' li '，' click '，function(){ var index=$(this)} .index()；var info=$(this).html()；警报（索引'-'信息);});/script脚本类型=' text/JavaScript ' $(' ul ').on('click '，' li '，function(){ var index=$(this)} .index()；var info=$(this).html()；警报（索引'-'信息);});/script