ES6的块级作用域--读书笔记

let实际上为 JS 新增了块级作用域。

让我们来看段代码：

function f1() {
    let n = 6;
    if (true) {
        let n = 10;
    }
    console.log(n); // 6
}
f1();

f1函数有两个代码块，都声明了变量n，运行后输出6。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值是10。

ES6 允许块级作用域的任意嵌套。

如下代码使用了一个五层的块级作用域(外层作用域无法读取内层作用域的变量，但内层作用域可以定义外层作用域的同名变量。)

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 报错
}}}};

再看下面这段代码，打印结果是：Hello，说明内层作用域可定义外层作用域的同名变量，且可更改其值。

{{{{
    let insane = 'Hello World';
    {let insane = 'Hello';
     console.log(insane);  //Hello
    }
}}}};

块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。

// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

我们是否想过：为什么需要块级作用域？

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的情况。如下

1.内层变量可能会覆盖外层变量。

var tmp = new Date();
function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}
f(); // undefined

以上代码含义：if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

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

var str = 'hello';
for (var i = 0; i < str.length; i++) {
  console.log(str[i]);
}
console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。