专题 | 变量函数作用域声明提升

原创

已于 2022-05-09 19:10:41 修改 · 425 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #es6

于 2021-07-22 09:56:12 首次发布

本文探讨JavaScript中的作用域，包括全局作用域、函数作用域和块级作用域，强调let和const带来的块级作用域变化。变量提升特性使var声明的变量在函数顶部，而let和const不会。通过示例解析变量赋值、函数声明提前以及在if和循环中的作用域行为。同时，文章提供练习题和解析，帮助深入理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用域可以分为全局作用域、函数作用域、块级作用域。

在js中，一个变量的定义与调用都是会在一个固定的范围中的，这个范围我们称之为作用域。

如果变量定义在全局环境中，那么在任何位置都可以访问到这个变量，如果变量定义在函数内部，那么只有在函数内部可以访问到这个变量，如果这个变量定义在一个代码块中，那么只能在这个代码块中访问带这个变量。

块级作用域使用let或者const关键字定义变量。

变量提升是将变量的声明提升到函数顶部的位置，而变量的赋值并不会被提升。这个变量提升特指var.

1.全局变量var局部变量let可以重新赋值，const重新赋值会报错

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		var a=40;
		a=50;
		console.log(a); //50
		let b=80;
		b=90;
		console.log(b);//90
		const c=100;
		c=300;
		console.log(c);//报错
		</script>
	</body>
</html>

这个不懂

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
	    var a="ago";
		function able(){
		return a;
		}
		console.log(a);
		console.log(able());
		</script>
	</body>
</html>

2.全局变量var可以声明提前，局部变量let不可以声明提前

1.变量声明提前

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		console.log(a);
		console.log(b);
		var a;
		let b;
		</script>
	</body>
</html>

2.变量函数声明提前

var 声明提前，破坏程序正常的执行顺序

没有块级作用域，块内的变量，很可能影响到块外的程序

let不会被声明提前，让if和循环的{}也变成作用域

1.下面这个列子好好看下let与var带来的影响，最后的时间一个是0.3,一个是1.1,

js中，if和循环的{}都不是作用域,let让if和循环的{}变成作用域，t只会影响内部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
	    let t=0;
		function fun1(){
			console.log(`调用fun1,费时0.3秒`);
			t+=0.3;
		}
		function fun2(){
			console.log(`调用fun2,