es5和es6作用域的区别有哪些(es5,es6,web开发)

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

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

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

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

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

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

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

1. 全局作用域

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

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

2. 局部作用域（函数作用域）

函数体中变量的作用域

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

例子

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

Es6中新增块级作用域

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

为什么需要块级作用域？

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

vari=5;functionfun(){console.log(i);//undefinedif(true){vari=6console.log(i);//6}}fun()

执行结果

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

vari=5;functionfun(){vari;console.log(i);if(true){i=6console.log(i)}}fun()

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

vari=5;functionfun(){console.log(i);//5if(true){leti=6console.log(i);//6}}fun()

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

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

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

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

for(leti=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声明的变量/常量，该{ }所在范围也属于块作用域

关于作用域的例子

<scripttype="text/javascript"> { vara=1; console.log(a);//1 } console.log(a);//1 //可见，通过var定义的变量可以跨块作用域访问到。 (functionA(){ varb=2; console.log(b);//2 })(); //console.log(b);//报错， //可见，通过var定义的变量不能跨函数作用域访问到 if(true){ varc=3; } console.log(c);//3 for(vari=0;i<4;i++){ vard=5; }; console.log(i); //4(循环结束i已经是4，所以此处i为4) console.log(d);//5 //if语句和for语句中用var定义的变量可以在外面访问到， //可见，if语句和for语句属于块作用域，不属于函数作用域。 { vara=1; letb=2; constc=3; { console.log(a); //1 子作用域可以访问到父作用域的变量 console.log(b); //2 子作用域可以访问到父作用域的变量 console.log(c); //3 子作用域可以访问到父作用域的变量 varaa=11; letbb=22; constcc=33; } console.log(aa); //11 //可以跨块访问到子块作用域的变量 //console.log(bb); //报错 bbisnotdefined //console.log(cc); //报错 ccisnotdefined }</script>