javascript - 在 ES6 中将整个 JS 代码块包装在 {} 中

Question

将整个代码块包裹在两个花括号中有什么意义？例如在 .js 文件中:

{    
const firstVar;

class firstClass {}

class secondClass {}    
}

这是为了创建 block 作用域并保持全局 namespace 的清洁吗？例如，它是否相当于将整个 javascript 模块包装在一个自调用函数中？

以这个JS文件为例；

https://github.com/codrops/PageFlipLayout/blob/master/js/demo.js

Answer 1

是的，这与创建 IIFE 以将变量与全局范围隔离的旧做法非常相似。

由于const 和let 是 block 作用域，而不是词法(或函数)作用域，您不需要创建一个完整的函数并调用它。只需将其包装在一个 block 中就足够了。

{
  const foo = 42;
  console.log(foo); // 42
}
console.log(foo); // ReferenceError

值得注意的是，与 IIFE 相比，这种做法仍然较少使用(也没有那么强大)，因为 IIFE 还可以防止泄漏 var 和 function 声明，哪个街区不会。虽然今天的常见用例是使用模块，这将隐式地防止将变量和对象泄漏到全局范围内。

只有 let、const 和 class 是 block 作用域的。