一：ES5 var作用域
//ES5中的var是没有块级作用域的（if/for）
//ES6中的let是有块级作用域的（if/for）
// 1.变量作用域:变量在什么范围内是可用.
{
var name = 'why';
console.log(name);
}
console.log(name);
//不管在{ }里面，还是在外面都可以调用
二：ES5 var作用域
//2.没有块级作用域引起的问题: if的块级
var func;
if(true){
var name ="why";
func = function(){
console.log(name);
}
func()
}
name='kobe';
func()
//第一次调用是未被修改之前，第二次调用被修改
//说明var 的修改，会导致之后再次调用的结果发生变化
2.1ES5 var作用域
var name = 'why'
function abc(aaa){
console.log(aaa);
}
abc(name)
name = "so"
console.log(name)
//和上个案例相似
三ES5 var作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级作用域</title>
</head>
<body>
<button>按钮0</button>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script>
//3.没有块级作用域引起的问题:for的块级
var btns = document.getElementsByTagName('button');
for (var i=0;i<btns.length;i++){
btns[i].addEventListener('click',function(){
console.log("第"+i+'个按钮被点击');
})
}
//不管怎么点都是显示的是最后一个按钮
//这就是全局变量引起的
//请看下一个案例解决
</script>
</html>
四 ES5 闭包解决全局变量问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级作用域</title>
</head>
<body>
<button>按钮0</button>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script>
// 我们可以用闭包解决ES5的var全局变量问题
// 为什么闭包可以解决问题: 函数是一个作用域.
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>
</html>
五.ES6 let的作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级作用域</title>
</head>
<body>
<button>按钮0</button>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script>
var btns = document.getElementsByTagName('button');
for (let i=0;i<btns.length;i++){
btns[i].addEventListener('click',function(){
console.log("第"+i+'个按钮被点击');
})
}
//直接用ES6 let和ES5中使用闭包解决全局变量的结果是一样的
</script>
</html>
