浅谈ES6 块级作用域

1、为什么需要块级作用域

ES5只有全局作用域和函数作用域，没有块级作用域，会带来以下问题：

1) 变量提升导致内层变量可能会覆盖外层变量

[javascript] view plain copy

1. var i = 5;  
2. function func() {  
3.     console.log(i);  
4.     if (true) {  
5.         var i = 6;  
6.     }  
7. }  
8. func(); // undefined  

2) 用来计数的循环变量泄露为全局变量

[javascript] view plain copy

1. for (var i = 0; i < 10; i++) {    
2.         console.log(i);    
3. }    
4. console.log(i);  // 10  

2、ES6的块级作用域

ES6允许块级作用域的任意嵌套。外层作用域无法读取内层作用域的变量。

[javascript] view plain copy

1. {{{{  
2.     {let i = 6;}  
3.     console.log(i);  // 报错  
4. }}}}  

内层作用域可以定义外层作用域的同名变量。

[javascript] view plain copy

1. {{{{  
2.     let i = 5;  
3.     {let i = 6;}  
4. }}}}  

块级作用域的出现使得立即执行函数不再需要。

立即执行函数：

[javascript] view plain copy

1. (function() {  
2.     var i = 5;  
3. })();  

块级作用域：

[javascript] view plain copy

1. {  
2.     let i = 5;  
3. }  

 

3、块级作用域与函数声明

ES5规定，函数只能在顶层作用域和函数作用域之外声明，不能在块级作用域中声明。

[javascript] view plain copy

1. if (true) {  
2.     function func() {}  
3. }  
4. try {  
5.     function func() {}  
6. } catch {  
7. }  

上面两种函数声明在ES5中都是非法的，但是浏览器没有遵守这一规定，还是支持在块级作用域中声明函数，因此以上两种情况实际都能运行，不会报错；但是，在严格模式下，还是会报错。

[javascript] view plain copy

1. 'use strict':  
2. if (true) {  
3.     function func() {} // 报错  
4. }  

ES6引入了块级作用域，明确允许在块级作用域中声明函数。

[javascript] view plain copy

1. 'use strict':  
2. if (true) {  
3.     function func() {} // 不报错  
4. }  

ES6还规定，在块级作用域中，函数声明的行为类似于let，在块级作用域之外不可引用。

ES6中，函数声明会提升到函数作用域的头部。

[html] view plain copy

1. function func() {  
2.     console.log('out');  
3. }  
4. (function() {  
5.     if (false) {  
6.         function func() {  
7.             console.log(‘in’);  
8.         }  
9.     }  
10.     func();  
11. })();  

在ES5中输出：in

在ES6中输出：out

但是，以上代码在Chrome中运行会报错，实际运行的是以下代码：

[javascript] view plain copy

1. function func() {  
2.     console.log(‘out’);  
3. }  
4. (function() {  
5.     var func = undefined;  
6.     if (false) {  
7.         function func() {  
8.             console.log(‘in’);  
9.         }  
10.     }  
11.     func();  
12. })();  

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数，若确实需要，也应该写成函数表达式，而不是函数声明语句。

[javascript] view plain copy

1. {  
2.     let func= function func() {  
3.         console.log(‘in’);  
4.     };  
5. };  

注意：ES6的块级作用域允许声明函数只在使用大括号的情况下成立，如果未使用大括号，会报错。

[javascript] view plain copy

1. 'use strict':  
2. if (true) {  
3.     function func1() {} // 不报错  
4. }  
5. if (true)  
6.     function func2() {} // 报错  

ES6的let和const命令都涉及块级作用域