当我们编写 JavaScript 时，我们经常会使用立即执行函数表达式（Immediately-invoked function expression，IIFE）来创建私有作用域。IIFE 是一个匿名函数，它被立即调用并且可以定义一些私有变量和函数，这些变量和函数只能在 IIFE 内部访问。这种技术在开发者中非常流行，尤其是在过去，因为在 ES6 之前，JavaScript 没有支持块级作用域声明的语法。
随着 ES6 和 ES2020 的发布，JavaScript 已经具备了标准块级作用域声明的能力。块级作用域可以限制变量在块级作用域内部的可见性。在本文中，我们将详细介绍如何使用 ES2021 新增的块级作用域声明来优化和简化 IIFE 的用法。
IIFE 带来的问题
IIFE 可以创建一个私有变量和函数的作用域。考虑下面的示例代码：
var x = 1;
(function() {
var x = 2;
console.log(x);
})();
console.log(x);上面的代码使用一个 IIFE 来为变量 x 创建了一个私有作用域。IIFE 内部定义了一个局部变量 x，该变量的值为 2。然后，在 IIFE 内部使用 console.log 来打印局部变量 x 的值。最后，外部调用 console.log 来打印全局变量 x 的值，该变量的值为 1。
使用 IIFE 的一个问题是，它不符合现代 JavaScript 的语言特性。IIFE 通过创建一个私有作用域来隐藏变量和函数，但是在 ES6 之前，它是一种比较“笨拙”的方式。另一个问题是，IIFE 变量和函数的名称和作用域是被硬编码在函数内部的。这使得在内部和外部修改和调用 IIFE 内部的变量和函数更加困难。
使用块级作用域
块级作用域定义了一个新的关键字 let 和 const 来声明变量和常量。在声明 let 和 const 的变量和常量时，它们只在声明它们的块中可见。
考虑下面的示例代码：
{
let x = 1;
console.log(x);
}
console.log(x);上面的代码使用块级作用域来创建一个局部变量 x。变量 x 只能在块级作用域内部可见。通过使用块级作用域，我们可以更方便地实现私有变量的概念，无需使用 IIFE。
另一个好处是，由于 let 和 const 关键字只在语句块内部可见，这使得我们可以更加方便和安全地管理变量声明和访问。下面的代码示范了这一点。
let x = 1;
{
let x = 2;
console.log(x);
}
console.log(x);上面的代码使用块级作用域创建了两个变量 x。在块级作用域内部，我们创建了一个名为 x 的变量，其值为 2。在块级作用域外部，我们创建了另一个名为 x 的变量，其值为 1。通过块级作用域，我们可以避免由于同名变量的定义而导致的混乱。
ES2021 引入的块级作用域声明
ES2021 引入了一个新的关键字，名为 block。其语法类似于函数声明或常量声明。当我们在代码中使用 block 声明时，我们可以在块级作用域中创建一个变量，并将其绑定到该块内部。
使用 block 声明来创建变量的主要好处是，它们在块级作用域中声明并限制其可见性。在下面的示例代码中，我们使用 block 声明语法来创建一个变量。在这个示例中，我们需要在 for 循环中跟踪每个按钮的索引。
for (let i = 1; i <= 10; i++) {
block index = i;
button.addEventListener('click', function() {
console.log(index);
});
}上面的代码示例中，我们使用了 let 关键字来声明了一个 i 变量。同时，在每次循环中，我们使用 block 声明创建了一个名为 index 的变量，并将其绑定到该块内部。在 JavaScript 中，if 语句、for 循环和其他控制语句都会创建一个块级作用域。
总结
在本文中，我们介绍了 IIFE 的问题以及如何使用 ES2021 的块级作用域来避免这些问题。通过使用块级作用域声明，我们可以更加方便和安全地管理我们的变量和函数的作用域，而无需使用 IIFE 这种“笨拙”的方式。希望这篇文章能够帮助你更好地编写 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654e2d217d4982a6eb771111