块级作用域
补充ES5和ES6的知识
- ES5之前在if和for中没有块级作用域的概念,所以在很多时候,我们都必须使用到function的作用域来解决应用外变量的问题-------使用闭包!!
- ES6中加入了let,let他是有if 和for的块级作用域
补充块级作用域的知识
JS中作用域有:全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域,使用let声明的变量只能在块级作用域里访问,有“暂时性死区”的特性(也就是说声明前不可用)。
块作用域由 { } 包括,if语句和for语句里面的{ }也属于块作用域。
引用ES5中var没有块级作用域引起的问题:for-----未使用闭包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级作用域</title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script type="text/javascript">
var btns = document.getElementsByTagName('button');
for (var i=0;i<btns.length;i++){
btns[i].addEventListener('click',function () {
console.log('第'+i+'个按钮被点击');
})
}
</script>
</html>
无论点击哪一个按钮 都无法实现对某个按钮的监听的打印,这是因为在var中,没有块级作用域,在进行i++过程中,被替代
引用ES5中var没有块级作用域引起的问题:for-----使用使用闭包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级作用域</title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script type="text/javascript">
var btns = document.getElementsByTagName('button');
for (var i=0;i<btns.length;i++){
(function(num){btns[i].addEventListener('click',function () {
console.log('第'+num+'个按钮被点击');
})
})(i)
}
</script>
</html>
在ES5中通过var实现了对按钮的监听—闭包存在的完美性
ES6中使用let无需闭包,因为本身自带块级作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级作用域</title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script type="text/javascript">
const btns = document.getElementsByTagName('button');
for (let i=0;i<btns.length;i++){
{btns[i].addEventListener('click',function () {
console.log('第'+i+'个按钮被点击');
})
}
}
</script>
</html>
ES6完美吧!!!真的很棒,但是这只是冰山一角!!冰山一角