代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>var和let区别测试</title>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</body>
<script>
let btns = document.getElementsByTagName("button");
for(var i = 0;i< btns.length;i++) {
btns[i].addEventListener("click", function () {
console.log("第" + i + "按钮被点击")
});
}
// ES5作用域 使用闭包解决
// ES5作用域 没有代码块作用域,但是存在函数作用域,使用闭包解决作用域问题
var btns = document.getElementsByTagName("button");
for(var i = 0;i< btns.length;i++){
(function(i){
btns[i].addEventListener("click",function(){
console.log("第"+i+"按钮被点击")
});
}(i));
}
//ES6使用let,存在代码块作用域
let btns = document.getElementsByTagName("button");
for(let i = 0;i< btns.length;i++) {
(function (i) {
btns[i].addEventListener("click", function () {
console.log("第" + i + "按钮被点击")
});
}(i));
}
//ES5错误用法
var i = 0;
{
var i = 1;
btns[0].addEventListener("click",function(){
console.log("i是不是等于1?i="+i);
})
}
{
var i = 2;
btns[1].addEventListener("click",function(){
console.log("i是不是等于2?i="+i);
});
}
{
var i = 3;
btns[2].addEventListener("click",function(){
console.log("i是不是等于3?i="+i);
});
}
{
var i = 4;
btns[3].addEventListener("click",function(){
console.log("i是不是等于4?i="+i);
});
}
</script>
</html>
总结
1.ES5作用域 没有代码块作用域,但是存在函数作用域,使用闭包解决作用域问题
2.ES6使用let,存在代码块作用域