1 问题
先说说没有块级作用域, 可能产生的问题.
1.1 内层变量覆盖外层变量
- var temp=1;
- function f(){
- console.log(temp);
- if(false){
- var temp='字符串变量';
- }
- }
- f()
运行结果:
undefined
因为变量提升, 导致 if 语句体中的变量 temp 覆盖了外层变量 temp.
1.2 用于循环的计数变量, 其实是全局变量
- var s = 'es6';
- for (var i = 0; i < s.length; i++) {
- s[i];
- }
- console.log('i=' + i);
运行结果:
i=3
2 块级作用域
ES6 通过 let 来实现块级作用域.
- function f1() {
- let i = 1;
- if (true) {
- let i = 11;
- }
- console.log(i);
- }
- f1();
运行结果:
1
外层的变量 i, 不受内层变量 i 的影响.
使用 {...} 结构, 就可以标注出一个块级作用域. 如果一个变量在外层没有定义, 那么就会抛出 ReferenceError: xxx is not defined 错误. 请看下例:
- {
- {
- let str = '你好'
- }
- console.log(str);
- }
运行结果:
- console.log(str);
- ^
- ReferenceError: str is not defined
内层作用域可以定义与外层作用域同名的变量, 而不相互影响:
- {
- let str='你好';
- {
- let str = '你好吗';
- console.log('内层:'+str);
- }
- console.log('外层:'+str);
- }
运行结果:
内层: 你好吗
外层: 你好
有了块级作用域, 我们就不需要 IIFE(立即调用函数表达式) 啦! IIFE 是一个在定义时就会立即执行的 JavaScript 函数. 以前没有块级作用域, 我们都是使用 IIFE 来模拟块级作用域.
来源: http://www.jianshu.com/p/8f2e7e117c66