let的应用场景

因为闭包的存在，会给我们的应用中带来一些不必要的麻烦。比如下面的例子：

<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 (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                alert("我是第" + (i + 1) + "个按钮");
            };
        }
    </script>
</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">
        <script type="text/javascript">
            var btns = document.getElementsByTagName("input");
            for (var i = 0; i < btns.length; i++) {
                //把i的值绑定到按钮的一个属性上，那么以后i的值就和index的值没有关系了。
                btns[i].index = i;
                btns[i].onclick = function () {
                    alert("我是第" + (this.index + 1) + "个按钮");
                };
            }
        </script>
</body>

方式2：使用匿名函数的自执行

<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 (var i = 0; i < btns.length; i++) {
//因为匿名函数已经执行了，所以会把 i 的值传入到num中，注意是i的值，所以num
(function (num) {
btns[i].onclick = function () {
alert("我是第" + (num + 1) + "个按钮");
}
})(i);
}
</script>
</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[i].onclick = function () {
                alert("我是第" + (i + 1) + "个按钮");
            };
        }
    </script>
</body>

站内部分资源由网友投稿或收集于网络，若侵犯了您的合法权益，请联系我们删除

THE END