位置: 编程技术 - 正文
JS常见问题之为什么点击弹出的i总是最后一个(javascript常见问题)
编辑：rootadmin推荐整理分享JS常见问题之为什么点击弹出的i总是最后一个(javascript常见问题)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:javascript常见问题,js中遇到的问题,javascript常见问题,js中出现nan解决方案,javascript:;怎么解决,js常见错误,js常见错误,js中遇到的问题,内容如对您有帮助，希望把文章链接给更多的朋友！
在前端群里看见过很多人问过这个问题，今晚又有人问了这个问题，所以写篇文章整理一下。首先看一下代码,点击li之后弹出当前li所对应的索引值。于是很多人刷刷刷写出了下面的代码。
但是结果不尽人意，为了简单，我们约定一下页面中有2个li。点击li之后弹出的都是2。 我们首先来分析一下为什么结果是1.我们可以简单的将循环分成两部。
在执行click的函数的时候，会有一个作用域链，这个作用域链是一个对象列表，这组对象定义了代码作用域中的变量。（ 关于变量对象的内容想更详细了解的可以查看变量对象。）当我们alert(i)的时候，会去从内到外的去寻找变量i。这个时候这个函数的作用域链上有两个对象，这时循环已经结束了，i此时的值为2.所以点击任何一个li，弹出的都是2，而不是我们想要的索引值。重点在于弹出的是变量i，变量i，变量i。重要的事情说三遍。
那么问题来了，我们要如何解决这个问题呢。我们需要做的就是在每次给aLi[i]绑定事件的时候，将这个时候i的值保存在内部的作用域中。解决方案如下。
这里涉及到一个块级作用域的概念。在es6出来前，函数是作为创建块级作用域的主要手段。这里我们通过在aLi[i].onclick外面套上一层函数，将i作为参数，我们重新分析一下结果。
由于多了一层自执行函数的包裹，当我们点击li时，会有三层的作用域，从内带外分别是：click函数内部的变量对象，自执行函数的变量对象和最外层的window对象。查找到第二层的时候，找到了i，自执行函数的i等于传入的参数值，相对应的存下了当时i的值，所以就弹出了相应的索引值。
下面再给大家分享一个js常见的问题，实现点击li能够弹出当前li索引与innerHTML的函数
点击其中一项需要alert出如下结果：
按照我们平常的想法，代码应该是这样写的：
但是不巧的是产生的结果是这样的：
索引index为什么总是4呢，这是js中没有块级作用域导致的。这里有三种解决思路
1. 使用闭包
2.使用ES6中的新特性let来声明变量
用let来声明的变量将具有块级作用域，很明显可以达到要求，不过需要注意的是得加个'use strict'（使用严格模式）才会生效
3.引入jquery,使用其中的on或delegate进行事件绑定（它们都有事件代理的特性）
JavaScript类型系统之正则表达式 定义正则又叫规则或模式，是一个强大的字符串匹配工具。javascript通过RegExp类型来支持正则表达式特性[1]贪婪性，匹配最长的[2]懒惰性，不设置/g，则
js与jQuery实现checkbox复选框全选/全不选的方法 本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法。分享给大家供大家参考，具体如下：先来看看JavaScript实现checkbox复选框全选/全不选的方
javascript简单比较日期大小的方法 本文实例讲述了javascript简单比较日期大小的方法。分享给大家供大家参考，具体如下：//获取起始日期varstartDate=document.all.startdate.value;//转换为日期格式
标签: javascript常见问题
本文链接地址:https://www.jiuchutong.com/biancheng/384707.html 转载请保留说明！上一篇：浅谈javascript 函数表达式和函数声明的区别(javascript中的函数该如何理解)
下一篇：JavaScript类型系统之正则表达式(js的类型有哪几种)
![javascript函数的节流[throttle]与防抖[debounce](javascript函数的作用)](https://www.jiuchutong.com/image/20240129/1706502779.jpg)
