本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑
es5和es6在作用域上的区别:
es5中的作用域只有两种:全局作用域和函数作用域
es6中的作用域有三种:全局作用域、函数作用域和块级作用域
Es5中只有全局作用域和函数作用域
ES5中用var声明变量,var声明的变量可能存在于全局作用域中,也可能存在在局部作用域中,具体情况如下
1. 全局作用域
拥有全局作用域的三种情况
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()
执行结果 函数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
块级作用域特点
关于作用域的例子
<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); // 3for(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作用域的区别是什么的详细内容,更多请关注php中文网其它相关文章!