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
暂无评论内容