|
|
因为闭包的存在，会给我们的应用中带来一些不必要的麻烦。比如下面的例子：
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</body>
在实际点击button的时候，弹出的都是”我是第4个按钮”，这又是为什么呢？是因为闭包导致的，给onclick赋值的函数内部已经访问了另一个外部作用域的变量i，而闭包中使用的局部变量的值，一定是局部变量的最后的值。因此点击的时候，总是会读取i的最后一个值3，因此造成了每次点击都是“第4个按钮”。
遇到这种问题，有三种解决方式供参考。
方式1：给每个按钮添加一个属性，来保存每次i的临时值。
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</body>
方式2：使用匿名函数的自执行
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</body>
方式3：使用es6新增的let声明变量i
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<script type="text/javascript">
var btns = document.getElementsByTagName("input");
for (let i = 0; i < btns.length; i++) {
btns.onclick = function () {
alert("我是第" + (i + 1) + "个按钮");
};
注非原创，搬砖
 |
|
发表于 2022-5-8 15:29:17
