一、ES5中的var
<body>
<button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <script> var btns = document.getElementsByTagName('button') for(var i = 0;i < btns.length;i ++){ btns[i].addEventListener('click',function(){ console,log('第' + i + '个按钮被点击') }) }
</script>
</body>
无论点击哪个按钮,都是第三个按钮被点击
原因:var不存在块级作用域,比如for和if
解决方法:设置闭包
<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <script> var btns = document.getElementsByTagName('button'); for(var i = 0;i < btns.length;i ++){ (function (i) { btns[i].addEventListener('click',function() { console. log('第' + i + '个按钮被点击'); }) })(i) } </script>
</body>
为什么可以解决:因为在JavaScript中函数有作用域
二、ES6中的let
<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <script> const btns = document.getElementsByTagName('button'); for(let i = 0;i < btns.length;i ++){ btns[i].addEventListener('click',function() { console. log('第' + i + '个按钮被点击'); }) } </script> </body>
执行结果正确
ES6引入了let有了自己的作用域,如if、for
不将var修改的原因:防止浏览器不兼容以及开发者不适应