在es5之前、es5和es6中作用域问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
<!--1.var申明变量是作用域:变量作用域在什么范围都是可以使用的-->
// {
// var name='张三'
// console.log(name)
// }
// console.log(name)
<!--2.在if判断里面申明var变量也是没有作用域的-->
// var func;
// if(true){
// var name='张三'
// func=function () {
// console.log(name)
// }
// }
<!--2.1在判断外面也能访问申明的变量-->
// console.log(name);
<!--2.2在判断外面也能修改变量的值；這里描述一个场景：本来张三是要当一个显示值传替的，但是不知道谁手动改了变量后，值变成了李四；照成显示的值错误-->
// name='李四'
// func()
<!--3.在for判断里面申明var变量也是没有作用域的;场景：循环给五个按钮绑定点击事件后，点击第一个还是其它的按钮都输出第五个按钮被点击了-->
// var btn=document.getElementsByTagName('button')
// for(var i=0;i<btn.length;i++){
// btn[i].addEventListener('click',function () {
// console.log('第'+ i+'按钮被点击了');
// })
// }
<!--3.1解决var在for循环没有作用域的问题，需要用到es5的闭包或者函数的作用域;这相当于创建了五个函数，函数是有作用域的；为什么会有作用域這是因为javascrip会给穿个来的变量重新在函数里面第一个变量，循环变量i变了对了函数里面的i没有任何影响-->
// var btn=document.getElementsByTagName('button')
// for(var i=0;i<btn.length;i++){
// (function(i){
// btn[i].addEventListener('click',function () {
// console.log('第'+ i+'按钮被点击了');
// })
// })(i)
// }
<!--3.在es5语法之前if和for是没有块级作用域的概念的，在很多时候都与借助funciton来解决应用块外面变量的问题；自从es6语法加入了let后，用let在if、for定义的变量就有作用域的概念了-->
const btn=document.getElementsByTagName('button')
for(let i=0;i<btn.length;i++){
btn[i].addEventListener('click',function () {
console.log('第'+ i+'按钮被点击了');
})
}
</script>
</body>
</html>