JavaScript之ES6规范中let的巧用（经典案例讲解）

最新推荐文章于 2022-08-15 17:03:04 发布

原创最新推荐文章于 2022-08-15 17:03:04 发布 · 251 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6 #前端

前端专栏收录该内容

10 篇文章

订阅专栏

本文探讨了JavaScript中处理li元素点击事件时遇到的作用域问题。错误的写法导致循环结束后，所有li元素点击都会输出5。通过两种改进方法，即为li元素添加index属性或使用let关键字，解决了这个问题。改进方法确保了每个li元素点击时能正确输出其顺序号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分：

	<ul id="test">
        <li>天</li>
        <li>地</li>
        <li>人</li>
        <li>和</li>
    </ul>
    <ul>
        <li>dyklk</li>
    </ul>

要求：再点击某个li标签的时候，弹框输出其对应的顺序号（注意：本文js代码部分全为原生写法）。
错误写法：

var oLi =document.getElementById('test').getElementsByTagName('li');
   for(var i = 0; i < oLi.length; i++) {            
        oLi[i].onclick =function(event) {
            console.log(i+1);
        }
    }

此写法下：点击每个id为test的ul下的li，浏览器控制台输出的都是5。
改进办法①：

var oLi = document.getElementById('test').getElementsByTagName('li');
   for (var i = 0; i < oLi.length; i++) {
       oLi[i].index=i;
       oLi[i].onclick = function (event) {
           console.log(this.index+1);
       }
   }

改进办法②：使用let

var oLi =document.getElementById('test').getElementsByTagName('li');
  for(let i = 0; i < oLi.length; i++) {            
      oLi[i].onclick =function(event) {
          console.log(i+1);
      }
  }

解释：
错误写法：
for 循环中var关键字声明的变量i不具有块作用域，是一个全局变量，在页面打开时创建（变量声明提升），在页面关闭时销毁，当你点li标签的时候，页面已经加载完成，相关元素的事件绑定操作也已经完成，此时全局变量i经过for循环后已经变为4了，而当执行到输出语句时发现函数中没有i变量，根据作用域链往上寻找变量i，找到全局变量i后就输出了，结果当然不是你想要的啦。
改进办法①：在每次for循环中将索引 i 保存为对应li元素对象的一个属性，这样写直接让每个li元素对象与其顺序号绑定在一起了，所以肯定能成功啦。
改进办法②：循环执行oLi.length次，每次循环 i 的值不一样，，可以理解为每次循环都在一个新的块中进行，因为 i 是由let关键字声明的具有块级作用域的变量，不会影响作用域链，而onclick事件绑定的函数中没有 i 值，就会往上找到let声明的变量 i 来执行输出。（我自己是这么想的）