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只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。