本文共 924 字，大约阅读时间需要 3 分钟。

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://efccf.baihongyu.com/