块级作用域-let和var

最新推荐文章于 2023-01-24 11:51:30 发布

wendyNo

最新推荐文章于 2023-01-24 11:51:30 发布

阅读量172

点赞数

分类专栏： JS 文章标签： js

本文链接：https://blog.csdn.net/wendyno/article/details/112476947

版权

JS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JS中使用var来声明
1、变量作用域：变量在什么范围内是可用的
2、没有块级作用域引起的问题
3、变量提升

<body>
	<button>按钮1</button>
	<button>按钮2</button>
	<button>按钮3</button>
	<button>按钮4</button>
	<button>按钮5</button>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
	//变量提升
	var a = 99;// 全局变量a
	func();// f是函数，虽然定义在调用的后面，但是函数声明会提升到作用域的顶部。 
	console.log(a);// a=>99,  此时是全局变量的a
	function func() {
	  console.log(a);// 当前的a变量是下面变量a声明提升后，默认值undefined
	  var a = 10;
	  console.log(a);      // a => 10
	}
	//没有块级作用域引起的问题
	var btns = document.getElementsByTagName('button');
	for(var i = 0;i<btns.length;i++){
		btns[i].addEventListener('click',function(){
			console.log('点击了第'+i+'个按钮');
		});//点击任意一个按钮，打印都是“点击了第5个按钮”
		//用闭包解决这个问题，因为函数有作用域
		(function(j){
			btns[i].addEventListener('click',function(){
				console.log('点击了第'+j+'个按钮');
			});
		})(i);
	}	
</script>
</body>

ES6 let中加入了if和for的块级作用域

<body>
	<button>按钮1</button>
	<button>按钮2</button>
	<button>按钮3</button>
	<button>按钮4</button>
	<button>按钮5</button>
<script type="text/javascript" src="./js/vue.js"></script>
<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+'个按钮');
		});//点击任意一个按钮，打印都是“点击了第5个按钮”
	}	
</script>
</body>

wendyNo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
块级作用域-let和var

JS中使用var来声明1、变量作用域：变量在什么范围内是可用的2、没有块级作用域引起的问题<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button><script type="text/jav
复制链接

扫一扫

专栏目录