ES6的let的小demo

let和var的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.item {
     
     
				float: left;
				width: 100px;
				height: 100px;
				margin: 0 10px ;
				border: 1px solid purple;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h2>点击切换颜色</h2>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
		<script>
			// 获取对象
			let items = document.getElementsByClassName('item');
			
			// 遍历并绑定事件
			// for(var i = 0; i < items.length; i++) {
     
     
			// 	items[i].onclick = function() {
     
     
					// this.style.background = 'pink';
					//items[i].style.background = 'pink'
			 		// 为什么不好使呢？
			 		// 因为全局变量i出现了问题,i并没有在块级作用域内.此时i=3,函数内部找督导i回到全局作用域找,
					// 全局作用域的i为3,所以点击时效,一共三个元素,下标最大为2,越界
			// 	}
			// }
			
			// 如何修改呢？
			for(let i = 0; i < items.length; i++) {
     
     
				items[i].onclick = function() {
     
     
					items[i].style.background = 'pink'
				}
			}
				
			
		</script>
	</body>
</html>
let和var的区别

猜你喜欢
