首页 技术文章 web前端 es5和es6作用域的区别是什么
正文 评论

es5和es6作用域的区别是什么

区别:es5中的作用域只有全局作用域和函数作用域两种,而es6中的作用域有全局作用域、函数作用域和块级作用域三种,新增了一个块级作用域。块级作用域的作用:可以解决内层作用域变量提升导致外层变量被覆盖、防止用于循环计数的变量泄露为全局变量。

es5和es6作用域的区别是什么

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑

es5和es6在作用域上的区别:

  • es5中的作用域只有两种:全局作用域和函数作用域

  • es6中的作用域有三种:全局作用域、函数作用域和块级作用域

Es5中只有全局作用域和函数作用域

ES5中用var声明变量,var声明的变量可能存在于全局作用域中,也可能存在在局部作用域中,具体情况如下

1. 全局作用域

拥有全局作用域的三种情况

a. 声明在函数外部的变量拥有全局作用域
b. 未定义直接赋值的变量自动声明为全局变量
c. window对象的属性拥有全局作用域

2. 局部作用域(函数作用域)

函数体中变量的作用域

  • 函数内部定义的变量只有在函数内才可访问

例子

  var a = 1;
  console.log(a);// 1                  此处a为全局变量,在全局作用域下都可访问得到

  b = 2
  console.log(b); // 2                 此处b未被var定义,而是被直接赋值,自动声明为全局变量
  
  function fun() {
    var c = 3;
    console.log(c);//3                 此处c存在在函数作用域中,仅在函数fun中可访问
  }
  fun()
  console.log(c);// undefined         全局作用域下访问函数作用域中的变量c,得到undefined

Es6中新增块级作用域

块级作用域可以简单理解为是:包在大括号{}里面的内容, 它可以自成一个作用域。块级作用域中变量由let和const声明

为什么需要块级作用域?

1. 解决内层作用域变量提升导致外层变量被覆盖

var i = 5;
function fun(){
  console.log(i);//undefined
  if(true){
    var i = 6
    console.log(i);//6
  }
}
fun()

执行结果
es5和es6作用域的区别是什么
函数fun里面的变量i使用var申明,此处涉及了变量提升的问题,所谓变量提升,即函数声明和变量声明总是会被解释器悄悄地"提升"到方法体的最顶部。所以此处的i相当于提前到了函数fun的最顶部,但是赋值还是在运行的i = 6时进行,上面的代码其实等价于:

var i = 5;
function fun(){
  var i;
  console.log(i);
  if(true){
    i = 6
    console.log(i)
  }
}
fun()

当第一个i被打印时,i只是被声明而还没有被赋值(在if语句中i才被赋值为6),因而第一个打印的i为undefined,第二个打印的i为6

var i = 5;
function fun(){
  console.log(i);//5
  if(true){
    let i = 6
    console.log(i);//6
  }
}
fun()

若使用let声明if中的变量i,则if语句所在的花括号{ }会形成一个块级作用域,该作用域中所声明的变量就“绑定”在该区域之中,不会再受外部影响(即暂时性死区),因而执行fun函数时输出的第一个i为全局作用域下的var i=5,if语句中输出的i为块级作用域中声明的let i=6

2. 防止用于循环计数的变量泄露为全局变量

for(var i = 0; i < 3; i++){
  doSomething()
}
console.log(i)//3

上述代码用var声明了i变量用于循环,理想状态下i应该只在循环体内有效,而此处的i却被暴露而在全局作用域下,因而在循环结束后仍能在全局作用下访问到i的值

for(let i = 0; i < 3; i++){
  console.log(i)
}
console.log(i)//undefined

如使用带有块级作用域的let来声明i,则此处声明的i变量只在for循环花括号{ }之中有效,在全局作用域下访问块级作用域中的变量会得到undefined

块级作用域特点

1. let声明的变量只在作用域(当前花括号内)中有效,因此允许任意嵌套,每一层都是单独作用域

2. 内层作用域可与外层作用域变量同名(不用作用域互不干扰)

3. let只能存在于当前作用域的顶层

注意:if语句和for语句里面的{ }中,如果有由let或const声明的变量/常量,该{ }所在范围也属于块作用域

关于作用域的例子

<script type="text/javascript">
	{
		var a = 1;
		console.log(a); // 1
	}
	console.log(a); // 1
	// 可见,通过var定义的变量可以跨块作用域访问到。

	(function A() {
		var b = 2;
		console.log(b); // 2
	})();
	// console.log(b); // 报错,
	// 可见,通过var定义的变量不能跨函数作用域访问到

	if(true) {
		var c = 3;
	}
	console.log(c); // 3
	for(var i = 0; i < 4; i++) {
		var d = 5;
	};
	console.log(i);	// 4   (循环结束i已经是4,所以此处i为4)
	console.log(d); // 5
	// if语句和for语句中用var定义的变量可以在外面访问到,
	// 可见,if语句和for语句属于块作用域,不属于函数作用域。

	{
		var a = 1;
		let b = 2;
		const c = 3;	
		
		{
			console.log(a);		// 1	子作用域可以访问到父作用域的变量
			console.log(b);		// 2	子作用域可以访问到父作用域的变量
			console.log(c);		// 3	子作用域可以访问到父作用域的变量

			var aa = 11;
			let bb = 22;
			const cc = 33;
		}
		
		console.log(aa);	// 11	// 可以跨块访问到子 块作用域 的变量
		// console.log(bb);	// 报错	bb is not defined
		// console.log(cc);	// 报错	cc is not defined
	}
</script>

【相关推荐:javascript视频教程、web前端】

以上就是es5和es6作用域的区别是什么的详细内容,更多请关注主题君其它相关文章!

-=||=-收藏赞 (0)
更多主题
单栏极简文艺WordPress博客主题:Diaspora主题
¥ 0 关注:20,393
详情
简约黑白WordPress个人博客主题:Personal主题
¥ 0 关注:20,242
详情
v1.0.0
小程序收录免费WordPress主题:XCX主题
¥ 0 关注:20,052
详情
v1.0.0
一款简约单栏的免费WordPress博客主题:itheme主题
¥ 0 关注:18,251
详情
功能丰富切轻量的WordPress虚拟资源主题:Rizhuti主题
¥ 599 关注:18,208
详情
大气优雅免费WordPress博客主题:HONEY主题
¥ 0 关注:15,047
详情
回复
暂无评论

不要再留垃圾评论了,主题君整理资源不容易,留几句鼓励的话吧。